11.11使用redux的combineReducers()函数-React全家桶--前端开发与实例(下)

当前位置:　首页>> 技术小册>> React全家桶--前端开发与实例(下)

### 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函数的典型签名如下：

```javascript
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()`的基本示例：

```javascript
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的强大功能，构建出高效、可维护的前端应用。

该分类下的相关小册推荐：

React全家桶--前端开发与实例(上)

React 进阶实践指南

ReactJS面试指南

剑指Reactjs

深入学习React实战进阶