使用combineReducers注意事项

一、从‘redux’包中引入combineReducers方法:

import { combineReducers } from 'redux';

  

二、针对state的不同属性写不同的reducer,每一个reducer专门负责修改state的某一个属性。

  写出来所有的reducer函数,这些函数的第一个参数是对应的state属性,第二个参数是action。函数最后返回的结果也是state的属性,而不是整个state。

  

//state structure
// const state = {
//     items:[],
//     value
// };

const items = (items=[], action) => {
    switch(action.type){
        case 'addItem':return addItem(items, action);break;
        case 'removeItem':return removeItem(items, action);break;
        case 'toggleItem':return toggleItem(items, action);break;
        default :return items;
    }
};

//上方的items方法就是专门用于处理state.items数组的reducer。
//这里最好reducer的名称与state的对应属性同名。 //注意items方法接受的第一个参数就是items,后面的赋值是ES6的默认赋值语法。可用于给state设置默认值

  

三、将这些reducer放入一个对象,最后作为参数传递给combineReducers方法。

const reducer = combineReducers({items, value});
export default reducer;

//注意如果reducer方法的名字与其对应state属性的名字不一样,则不能使用ES6对象字面量语法,需要用冒号说明对应方法。
//最后导出这个reducer,即可在store.js中引入作为参数传递给createStore方法,创建store。

  

主要的注意点就是各个reducer方法的第一个参数以及返回结果不再是整个state,而是state的对应属性。

另外好需要注意一下JavaScript的变量提升,如果使用赋值语法声明reducer函数,那么必须在声明所有reducer之后使用combineReducers方法,否则因为赋值语法声明的函数不会提升导致combineReducers方法接收到的对象的所有属性均为undefined。

如果使用function声明函数,那么可以任意位置使用combineReducers方法。

原文地址:https://www.cnblogs.com/DM428/p/8126056.html