Redux.md

React / 2022-03-08

Redux

Redux 核心原理

  • state
this.state ={
  todos: [{
    text: 'Eat food',
    completed: true
  }, {
    text: 'Exercise',
    completed: false
  }],
  visibilityFilter: 'SHOW_COMPLETED'
}

组件状态改变是因为本身state发生setState()

  • action
    action对象,描述要对组件的state做什么样的操作
{
  type: 'ADD_TODO',
  text: 'Go to swimming pool'
}
  • reducer函数
    通过reducer函数将组件原state和对state惊醒更改的action传入reducer函数,利用action对stat进行更改,返回新的state。

  • state 有多种状态,需要多个actio、多个reducer函数去做处理

  • reducer函数
    reducer(原state,action);

action

{
  type: 'ADD_TODO',
  text: 'Go to swimming pool'
}
  • 生成action的action创建函数
function addTodo(name){
  return {
    type:"ADD_TODO",
    name:name
  }
}
  • 创建并且提交
dispatch(addTodo(text))
  • 创建一个 被绑定的 action 创建函数 来自动 dispatch(创建action,返回action,提交action)
const addTodo = name => dispatch(addTodo(name))


//最终redux提供你得函数
addTodo("add");

React-redux 案例

安装

  • redux
  • react-redux
npm install redux react-redux --save

创建工程目录

  • Store 存放与redux相关的文件

    • Actions 存放所有action
    • Reducers 存放reduce
    • actionType.js 存放所有的action的type
    • index.js Redux的入口文件
  • Component 存放react组件

引入 Provider

在项目入口文件index.js中引入 Redux 提供的 Provider 组件

ReactDOM.render(
  <Provider>
    <App />
  </Provider>
, document.getElementById('root'));

创建store

在redux的入口文件中,创建store

  • 引入createStore和combineReducers
    • createStore:创建store
      参数:合并后的reducer
      参数:初始化状态的state(这里写个空对象即可)
    • combineReducers:合并reducer
      参数:对象(多个reduce组成)
import {createStore,combineReducers} from "redux"
import {addTodoItem} from "./Reducers/TodoReducer"

const rootReducer = combineReducers({
  addItem:addTodoItem
});

const initialState = {

};

const store = createStore(rootReducer,initialState);
export default store;

创建store完成后,引入index.js,完成应用入口文件:

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>
, document.getElementById('root'));

创建actionType.js文件

actionType.js文件用于保存action对象的type值,因为type值必须为字符串类型,并且
在action创建函数和reducer都要用到action的type属性,所以创建actionType.js文件来
保存,在使用的时候引入即可:

export const ADD_TODO_ITEM = "add_todo_item";
export const CHANGE_PENDDING = "change_pendding";
export const CHANGE_FINISHED = "change_fininshed";
export const DELETE_ITEM = "delete_item";

创建action.js文件

action.js文件把针对一个state进行操作的action创建函数定义在一起

import {ADD_TODO_ITEM,CHANGE_PENDDING,CHANGE_FINISHED,DELETE_ITEM} from "../ActionType";



export function addTodoList(toDoName){
  return {
    type:ADD_TODO_ITEM,
    itemName:toDoName
  }
}

export function penddingToFinished(item){
  return {
    type:CHANGE_PENDDING,
    item:item
  }
}

export function finishedToPendding(item){
  return{
    type:CHANGE_FINISHED,
    item:item
  }
}

export function deleteItem(item){
  return{
    type:DELETE_ITEM,
    item:item
  }
}

创建reducer.js

每一个state对应一个reducer,我们把它定义在一个文件中,并且将组件的初始state也定义在这里,
组件默认回去state都是从这个reducer中获取到的

import {ADD_TODO_ITEM,CHANGE_PENDDING,CHANGE_FINISHED,DELETE_ITEM} from "../ActionType"


const initialState = {
  pendding:[
    // {
    //   status:false,
    //   itemName:"王凯学习迷糊了,已经崩盘中。。。"
    // }
  ],
  finished:[
    // {
    //   status:true,
    //   itemName:"Vue学习",
    // }
  ]
}

export function addTodoItem(state=initialState, action){
  switch(action.type){
    case ADD_TODO_ITEM:
      return{
          pendding:state.pendding.concat({status:false,itemName:action.itemName}),
          finished:state.finished
      }
    case CHANGE_PENDDING:
      state.pendding.map((value,index)=>{
        if(value.itemName === action.item.itemName){
          state.pendding.splice(index,1);
        }
      })
      return{
        pendding:state.pendding,
        finished:state.finished.concat({status:!action.item.status,itemName:action.item.itemName})
      }
    case CHANGE_FINISHED:
      state.finished.map((value,index)=>{
        if(value.itemName === action.item.itemName){
          state.finished.splice(index,1);
        }
      })
      return{
        pendding:state.pendding.concat({status:!action.item.status,itemName:action.item.itemName}),
        finished:state.finished
      }

    case DELETE_ITEM:
      if(action.item.status){
        state.finished.map((value,index)=>{
          if(value.itemName === action.item.itemName){
            state.finished.splice(index,1);
          }
        })
      }else{
        state.pendding.map((value,index)=>{
          if(value.itemName === action.item.itemName){
            state.pendding.splice(index,1);
          }
        })
      }

      return{
        pendding:state.pendding,
        finished:state.finished
      }
    default:
      return state;
  }

}

初始化state的定义一定要跟组件对应

组件相关函数

  • mapStateToProps
    组件接受数据,并且将数据放置在组件的this.props中

  • mapActionToProps
    组件提交对组件state更改的action

  • connect
    将组件接受数据和提交action的函数以及组件与redux中的对应reducer绑定

// 绑定组件对应的reducer,并且接受调用reducer返回新state
function mapStateToProps(state) {
  return{
    state:state.addItem
  }
}

// 提交action到上面那个函数绑定后跟组件对应的reducer
function mapActionToProps(dispatch){
  return {
    addItem:(name)=>{
      dispatch(addTodoList(name))
    },
    changePendding:(item)=>dispatch(penddingToFinished(item)),
    changeFinished:(item)=>dispatch(finishedToPendding(item)),
    deleteItem:(item)=>dispatch(deleteItem(item))
  }
}

export default connect(mapStateToProps,mapActionToProps)(Box);

原理:
mapStateToProps、mapActionToProps都是定义在组件中的回调函数,通过connect函数将他与rootReducer绑定;
connect(mapStateToProps,mapActionToProps)(Box):绑定完成后,给组件this.props返回数据和dispatch函数;
组建可以接受数据和使用提交action的方法接受和提交action
提交action去rootReducer

所有的 reducer 都会收到 action。
reducer 通过 action.type 来进行判定处理。
如果某个 reducer 不处理某个动作,也就是没有处理这个 action.type 的 case, 就会走 default 分支,把 state 原样返回。