Redux

Redux的核心原理

1.将组件的状态统一进行管理管理，由store来管理state。
2.reducer的作用是返回一个新的state去更新store中对用的state。
3.按redux的原则,每一次状态的改变都应通过提交action去触发，action传入对应的reducer 中，reducer返回一个新的state更新store中存放的state。
4.subscribe是为store订阅监听函数，这些订阅后的监听函数是在每一次dipatch发起后依次执行
5.redux避免了数据在组件之间流通导致状态难以维护，确保了单向数据流的开发原则。

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({
  //  管理所有的reducer
  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} from "../ActionType"


const initialState = {
  pendding:[
    // {
    //   status:false,
    //   itemName:"hello word"
    // }
  ],
  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 原样返回。