一、从‘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方法。