React 基础笔记(Redux-redux 版本)(十七)

他前面的步骤和基础版本差不多，也得创建仓库和模板,他的作用就是把一些需要处理公共数据的逻辑放到组件的外面,这样组件就是变成 UI 组件

(1)使用 Redux 就必须要提前安装

npm i redux -S

(2) 安装 React-redux

npm i react-redux

(3)在 src 目录下创建一个 store 文件夹,里面创建一个 index.js 文件作为公共仓库

公共模板

import { createStore } from 'redux'
// 引入reducer
import reducer from './reducer'
// 放入reducer
const store = createStore(reducer)
export default store

(4)创建 reducer 文件他里面接受两个参数(state,action) state 就是获取所有的公共数据

import { CHANGE_VALUE, CLICK_CHANGE, DELETE_ITEM } from './actiontypes'

const defaultState = {
  inputValue: '123',
  list: [
    'Racing car sprays burning fuel into crowd.',
    'Japanese princess to wed commoner.',
    'Australian walks 100km after outback crash.',
    'Man charged over missing wedding girl.',
    'Los Angeles battles huge wildfires.'
  ]
}
export default (state = defaultState, action) => {
  //这里判断action的type然后在返回state
  if (action.type === CHANGE_VALUE) {
    let newresult = JSON.parse(JSON.stringify(state)) //必须要重新生成一个新的对象,也不能使用Object.asign这样有的时候不起作用,而且每个判断里面必须有返回值
    newresult.inputValue = action.value
    return newresult
  }
  if (action.type === CLICK_CHANGE) {
    let newState = JSON.parse(JSON.stringify(state))
    if (newData.inputValue != null) {
      newData.list.push(newData.inputValue)
      newData.inputValue = ''
    }
    return newData
  }
  // 这里就是删除方法,必须返回新数据
  if (action.type === DELETE_ITEM) {
    let newState = JSON.parse(JSON.stringify(state))
    newData.list.splice(action.value, 1)
    return newData
  }
  return state
}

(5)调试的时候要借助 redux 工具,store 里面必须要加入这句话 window 开头的

import { createStore } from 'redux'
//引入reducer
import reducer from './reducer'
//放入reducer
const store = createStore(
  reducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)
export default store

这样后端基本上完事，下面就是前台的

(6) 在 index.js 第一个渲染的时候提供一个壳子，让所有的组件都能使用 store

import React from 'react'
import ReactDOM from 'react-dom'
import TodoList from './Todolist'
//引入react-redux 提供的一个标签
import { Provider } from 'react-redux'
import store from './store/index'
const App = (
  // {Todolist组件还有下面的组件都可以使用store}
  <Provider store={store}>
    <TodoList />
    {/* {类似a组件之类的} */}
    {/* <a></a> */}
  </Provider>
)
ReactDOM.render(App, document.getElementById('root'))

(7) 组件里面使用

//必须要引入connect
import { connect } from 'react-redux'
//然后在类的外面定义两个常量,两个常量都是方法,返回的都是对象

const mapStateToProps = state => {
  return {
    inputValue: state.inputValue,
    list: state.list
  }
}
const mapDispatchToProps = dispatch => {
  return {
    handleChange(e) {
      let value = e.target.value
      const action = {
        type: 'change_value',
        value
      }
      dispatch(action)
    },
    changeList() {
      let action = {
        type: 'change_list'
      }
      dispatch(action)
    },
    deleteItem(index) {
      let action = {
        type: 'deleteItem',
        value: index
      }
      console.log(index)
      dispatch(action)
    }
  }
}
//最后利用store挂钩

export default connect(
  mapStateToProps, //这里面放的是数据
  mapDispatchToProps //里面放的是操作的数据的方法
)(TodoList)

(8) 完整版本

import React, { Component, Fragment } from 'react'
// import store from './store/index'
import { connect } from 'react-redux'
class TodoList extends Component {
  render() {
    const {
      changeList,
      inputValue,
      handleChange,
      list,
      deleteItem
    } = this.props
    return (
      <Fragment>
        {/* {做完了映射,里面的数据就是继承了,因为最开始有个标签，他的级别高} */}
        <input value={inputValue} onChange={handleChange} />
        <button type="primary" onClick={changeList}>
          点击我
        </button>
        <ul>
          {list.map((item, index) => {
            return (
              <li
                key={index}
                onClick={() => {
                  deleteItem(index)
                }}
              >
                {index}---{item}
              </li>
            )
          })}
        </ul>
      </Fragment>
    )
  }
}
//第一步映射把state数据映射到公共数据上

const mapStateToProps = state => {
  return {
    inputValue: state.inputValue,
    list: state.list
  }
}
const mapDispatchToProps = dispatch => {
  return {
    handleChange(e) {
      let value = e.target.value
      const action = {
        type: 'change_value',
        value
      }
      dispatch(action)
    },
    changeList() {
      let action = {
        type: 'change_list'
      }
      dispatch(action)
    },
    deleteItem(index) {
      let action = {
        type: 'deleteItem',
        value: index
      }
      console.log(index)
      dispatch(action)
    }
  }
}
//导出这里要变化了,它的意思就是TodoList和store做链接
//第二步连接
export default connect(
  mapStateToProps, //这里面放的是数据
  mapDispatchToProps //里面放的是操作的数据的方法
)(TodoList)