React15 - redux中combineReducer的作用

combineReducers 是 Redux 提供的一个辅助函数，它的主要作用是将多个不同的 reducer 函数合并成一个单一的 reducer 函数，以便传递给 Redux 的 createStore。

简单来说，它的核心作用是：按模块拆分状态，按功能管理数据。

以下是它的详细作用、原理和使用场景：

1. 核心作用：拆分 Reducer

随着应用变得复杂，如果将所有状态更新逻辑都写在一个巨大的 reducer 函数里，代码会变得难以维护。
combineReducers 允许你根据业务模块或功能将 Reducer 拆分成多个小的、独立的小 reducer。每个小的 reducer 只负责管理全局状态树中的一个分支。

例如：
假设你的应用状态是这样的：

// 理想中的全局状态
{
  user: { ... },    // 用户信息
  posts: [ ... ],    // 文章列表
  comments: { ... }  // 评论
}

你可以创建三个独立的 reducer 来分别管理这三个部分：

• userReducer 只负责处理 state.user
• postsReducer 只负责处理 state.posts
• commentsReducer 只负责处理 state.comments

然后通过 combineReducers 将它们组合起来。

2. 工作原理

当你使用 combineReducers 组合多个 reducer 后，当发起一个 action 时：

1. 遍历执行：combineReducers 返回的根 reducer 会调用你传入的每一个子 reducer。
2. 更新指定分支：每个子 reducer 只接收到与自己对应的那部分 state 分支，并根据 action 返回新的分支状态。
3. 合并结果：最后，combineReducers 会将所有子 reducer 返回的新分支状态收集起来，组装成一个完整的新状态树。

3. 代码示例

import { combineReducers, createStore } from 'redux';

// 子 reducer A：负责用户信息
function userReducer(state = { name: '' }, action) {
  switch (action.type) {
    case 'SET_USER':
      return { ...state, name: action.payload };
    default:
      return state;
  }
}

// 子 reducer B：负责文章列表
function postsReducer(state = [], action) {
  switch (action.type) {
    case 'ADD_POST':
      return [...state, action.payload];
    default:
      return state;
  }
}

// 使用 combineReducers 合并
const rootReducer = combineReducers({
  user: userReducer,   // state.user 由 userReducer 管理
  posts: postsReducer  // state.posts 由 postsReducer 管理
});

// 创建 Store
const store = createStore(rootReducer);

console.log(store.getState());
// 输出：{ user: { name: '' }, posts: [] }

4. 使用 combineReducers 的好处

• 关注点分离：每个团队成员或每个模块可以独立维护自己的 reducer，互不干扰。
• 可维护性：当出现 bug 时，你可以直接定位到对应的子 reducer 文件，而不是在一个几千行的文件里寻找问题。
• 便于测试：每个小的 reducer 是纯函数，非常容易编写单元测试。

5. 补充说明

虽然 combineReducers 是官方推荐的工具，但它不是唯一的合并方式。你也可以手动编写一个根 reducer 函数，在里面根据不同的 key 调用不同的处理函数。不过，combineReducers 处理了绝大多数的样板代码和边界情况（比如 undefined 状态的处理），因此是实际开发中最常用的方案。