Redux 进阶：拆分 reducer
❓ state 过于庞大怎么办
因为 Redux 应用中只有一个 store，因此，当应用的交互越来越复杂时，store 必定会变成一个非常庞大的对象。这时，我们可以使用 Redux 提供的 combineReducers() 方法将多个小的 reducer 组合成一个 rootReducer，而每个小的 reducer 只关心自己负责的 action.type，因为在整个应用中，有些 state 之间是互不关联的，因此我们可以拆分 reducer，不同的 reducer 处理不同的 action.type。
假设现在有两个逻辑：一个计数器和一个 TODO。很明显这两个逻辑之间没有任何的联系，因此我们可以拆分成两个 reducer，然后再组合起来传给 createStore()：
// 计数器 reducer
function counter(state = 0, action) {
switch(action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state -1;
default:
return state;
}
}
// TODO reducer
function todos(state = [], action) {
switch(action.type) {
case 'ADD_TODO':
return state.concat([action.text]);
default :
return state;
}
}
// 组合成一个 rootReducer
const rootReducer = combineReducers({
counter,
todos
});
// 根据 rootReducer 创建 store
const store = createStore(rootReducer)
console.log(store.getState());结果
可以看到，store.getState() 中的 key 变成了子 reducer 的函数名，达到了拆分之间没有联系的 state 的目的。而 key 变成了子 reducer 的函数名的原因是，在组合 reducer 时的写法：
// 组合成一个 rootReducer
const rootReducer = combineReducers({
counter,
todos
});这里传入给 combineReducers() 方法的是一个对象，这里使用了 ES6 的语法，即当对象的 key 和 value 同名时，可以省略 key，上面的写法相当于：
const rootReducer = combineReducers({
- counter,
+ counter: counter,
- todos
+ todos: todos
});当然，key 是可以随意修改的，只是修改后，对于 state 的 key 也会有所不同罢了。需要记住的是 combineReducers() 方法的参数是一个对象，对象的 value 是需要组合的 reducer，对象的key 对应的是 state 中的 key，返回的是一个组合后的 reducer 函数，可以像普通 reducer 一样传给 createStore() 方法创建 store。
与 React 结合后结果是这样的：
在 coding 之前
构建一个 Redux 应用之前，我们应该先搭建好架构，也就是设计模式的那一套东西，在 coding 之前，不妨先停下来思考一下：
代码文件的组织结构
- 按角色组织
- 按功能组织
state 树的设计
- 一个模块控制一个 state 节点
- 避免冗余数据：做到 state 的范式化，类似 SQL 关系型数据库。为解决范式化数据的性能问题，可以使用 reselect 这样的工具提高性能。
- 树形结构扁平，避免很深的层次
- 确定模块的边界：在理想情况下，我们应该通过增加代码就能增加功能，而不是修改现有的代码。
下面是一个按功能组织的文件结构：
todoList/
action.js # 定义 action creators
actionTypes.js # 定义 action 类型
index.js # 把这个功能模块的文件导入，然后统一导出
reducer.js # 定义 reducer 如何处理 action
views/ # 定义所有 React 组件，包括容器组件和展示组件
component.js
container.js
filter/
action.js
actionTypes.js
index.js
reducer.js
views/
component.js
container.js