一个app中store（状态树）是唯一的
我们知道对于一个app, store应该是唯一，集中用reducer管理的，那么当app中有多个页面，每个页面有多个组件时，就应该有多个reducer来管理。 当我某个组件dispatch出去一个action(动作)时，store接收到action,应该交给谁来管理呢？这里我们暂时无法使store根据不同的action来交由相应的reducer处理。
combineReducer
combineReducer函数将多个不同的reducer整合在一起，然后返回一个整合后的reducer, 也就是一个函数；函数内部通过分治的方式处理不同的action;
代码实现
注意combineReducer函数仍然属于reduxde一部分， 所以我们只需要在上一节的代码中添加即可。
let combineReducer = (reducersObj){
// reducerObj是一个由所有所需reducer组成的对象
return (state, action={ type: Symbol() })=>{
// 返回值其实就是一个rootReducer, 所以参数是state， action，
// 注意这个rootReducer其实就是在创建store的时候传入的reducer.
// 上一节中，创建store的时候需要先调用一下reducer(), 以得到state的默认状态值
// 所以这里给action设置了一个默认值, 注意这里使用了Symbol这样会是action.type无法匹配到用户定义任何的actionTypes
rootReducer会返回一个新的state
let newState = {};
// 当我们接收到一个action时,我们无法知道该交由哪个reducer处理， 所以这里我们 需要遍历所有reducer
for (let key in reducersObj){
newState[key] = reducersObj[key](state[key], action)
// 这样一个reducer就成为了store状态树中的子树
// 比如页面中有todo, counter两个组件对应着两个reducer， reducersObj = {todo, counter}
// store状态树大概长这样： {todo: {list: [], counter: {number : 0}}
}
return newState;
}
}最后将 combineReducer导出即可
combineReducer使用
一般来说，在一个app项目目录中，我们都会将reducer独立出来，建立一个reducers文件夹，里面就是各个app中所需的reducer， 然后这个文件夹里还有一个index.js文件
- 在这个index.js中我们通常会先引入所有的reducer,并且引入combineReducer
import counter from ‘./counter‘;
...
import todo from ‘./todo‘;
import { combineReducers } from "./../redux";
const rootReducer = combineReducers({ counter, todo, .... }); export default rootReducer; -
在store.js文件中引入rootReducer
import { createStore } from "redux";
import rootReducers from "./reducers/index";
export default const store = createStore(rootReducers);
原文地址：https://www.cnblogs.com/paopaolee/p/9505114.html