11.11 使用Redux的combineReducers()函数

在React与Redux结合开发的大型前端应用中，管理复杂的状态树（state tree）是不可避免的挑战。Redux通过提供一系列的工具和方法来帮助我们组织和管理这些状态，其中combineReducers()函数就是这些工具中的关键一环。它允许我们将整个应用的状态拆分成多个小的、可管理的部分，每个部分对应一个reducer函数，最终通过combineReducers()将这些reducer合并成一个根reducer，从而管理整个应用的状态。

11.11.1 理解Redux中的Reducer

在深入探讨combineReducers()之前，首先我们需要对Redux中的reducer有一个清晰的认识。Reducer是一个纯函数，它接收先前的状态和一个动作（action）作为参数，返回新的状态。Reducer的核心原则是保持纯净性（purity），即不修改传入的状态，而是根据传入的状态和动作返回一个新的状态对象。

Reducer函数的典型签名如下：

function myReducer(state = initialState, action) {
  switch (action.type) {
    case 'SOME_ACTION':
      return newState; // 基于当前状态和action返回新状态
    default:
      return state; // 对于未识别的action，返回当前状态
  }
}

11.11.2 为什么需要combineReducers()

随着应用的增长，应用的状态也会变得越来越复杂。如果将所有状态都放在一个巨大的reducer中管理，那么这个reducer会很快变得难以维护。因此，Redux推荐我们将应用的状态分割成多个小的、相关的部分，每个部分由一个独立的reducer负责管理。

然而，Redux的store只能接收一个根reducer作为参数。为了解决这个问题，Redux提供了combineReducers()函数，它允许我们将多个reducer合并成一个单一的根reducer，这样我们就可以在Redux store中同时使用多个reducer了。

11.11.3 如何使用combineReducers()

combineReducers()函数接收一个对象作为参数，这个对象的每个key对应一个reducer，而每个value则是对应的reducer函数。combineReducers()函数会返回一个新的reducer函数，这个新的reducer函数会根据传入的action，将action分发到对应的reducer处理，并最终生成整个应用的新状态。

以下是一个使用combineReducers()的基本示例：

import { createStore, combineReducers } from 'redux';
// 定义reducer
function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, action.payload];
    default:
      return state;
  }
}
function visibilityFilter(state = 'SHOW_ALL', action) {
  switch (action.type) {
    case 'SET_VISIBILITY_FILTER':
      return action.payload;
    default:
      return state;
  }
}
// 使用combineReducers合并reducer
const rootReducer = combineReducers({
  todos,
  visibilityFilter
});
// 创建Redux store
const store = createStore(rootReducer);
// 后续可以使用store来dispatch actions和subscribe listeners

在这个例子中，我们定义了两个reducer：todos和visibilityFilter，分别用于管理待办事项列表和待办事项的可见性过滤器。然后，我们使用combineReducers()将这两个reducer合并为一个根reducer，并将其传递给createStore()来创建Redux store。

11.11.4 combineReducers()的工作原理

当combineReducers()生成的根reducer接收到一个action时，它会根据action的type属性来确定应该调用哪个子reducer来处理这个action。这是通过查看每个子reducer对应的key来实现的，因为每个key都可以视为一个action类型的命名空间。

然而，需要注意的是，combineReducers()默认假设每个子reducer都是独立的，即它们不会修改或依赖于其他reducer管理的状态。这意味着，当某个action被分发给某个子reducer时，只有该子reducer会返回一个新的状态对象（或值），而其他子reducer则会返回它们当前的状态。然后，combineReducers()会将所有子reducer返回的状态合并成一个新的状态对象，并返回这个新状态对象给Redux store。

11.11.5 注意事项和优化

• 保持Reducer的纯净性：确保每个reducer都是纯函数，不修改传入的状态，只根据输入返回新的状态。
• 避免不必要的状态更新：如果某个reducer接收到一个与其无关的action，它应该返回当前的状态，而不是一个新的状态对象。这有助于减少不必要的组件渲染。
• 优化状态结构：合理设计状态树的结构，避免过度嵌套或冗余。使用combineReducers()可以帮助我们实现这一点。
• 使用选择器（Selectors）：在组件中，通常不会直接访问Redux store的状态，而是通过Redux的useSelector钩子（在React中）或类似的机制来获取所需的状态片段。这有助于保持组件的简洁和高效。

11.11.6 结论

combineReducers()是Redux中用于管理复杂状态树的重要工具。通过将应用的状态拆分成多个小的、可管理的部分，并使用combineReducers()将它们合并成一个根reducer，我们可以更容易地维护和扩展Redux应用。然而，使用combineReducers()时也需要注意保持reducer的纯净性、避免不必要的状态更新，并合理设计状态树的结构。通过这些实践，我们可以充分利用Redux的强大功能，构建出高效、可维护的前端应用。