combineReducer（理解并使用combineReducers）

理解并使用combineReducers

在开发复杂的Redux应用程序时，使用单一的reducer往往不足以胜任所有任务。一个reducer负责管理整个应用状态树的所有状态可能难以维护。Redux提供combineReducers，它允许你将多个reducer组合成一个reducer。通过分解状态树的不同部分，combineReducers可以使得代码更具可读性和可维护性。

基本使用方法

使用combineReducers首先需要安装Redux包，然后在需要的文件中引入combineReducers和所有相关的reducers，然后调用combineReducers函数并传入所有reducers。这将返回一个新函数，该函数将执行每个reducer并将它们的结果组合成一个单一的状态对象。

``` import { combineReducers } from 'redux'; import todosReducer from './todosReducer'; import visibilityFilterReducer from './visibilityFilterReducer'; const rootReducer = combineReducers({ todos: todosReducer, visibilityFilter: visibilityFilterReducer }); export default rootReducer; ```

在上面的代码中，我们导入了combineReducers，todosReducer和visibilityFilterReducer两个reducer。我们调用combineReducers，将两个reducer作为参数传入，然后将返回的 rootReducer 作为默认导出。我们将 'todos' 作为键与 'todosReducer' 值相关联，将 'visibilityFilter' 作为键与 'visibilityFilterReducer' 值相关联。我们现在可以像任何其他reducer函数一样使用rootReducer。

combineReducers的工作原理

在我们的数据结构中，每个属性的值都是一个单独的reducer函数。当action被触发时，一系列reducer函数将被运行。

如果应用程序的总状态在一个对象中，并且没有在props传递给它，那么combineReducers的工作方式就像这样：

``` { reducer1: (currentstate, action) => newState1, reducer2: (currentstate, action) => newState2, reducer3: (currentstate, action) => newState3, ... } ```

例如，假设你有两个reducer：

``` function todosReducer(state = [], action) { switch (action.type) { case 'ADD_TODO': return [...state, action.payload]; case 'REMOVE_TODO': return state.filter((todo) => todo.id !== action.payload.id); default: return state; } } function visibilityFilterReducer(state = 'SHOW_ALL', action) { switch (action.type) { case 'SET_VISIBILITY_FILTER': return action.payload.filter; default: return state; } } ```

combineReducers的调用如下：

``` function rootReducer(state = {}, action) { return { todos: todosReducer(state.todos, action), visibilityFilter: visibilityFilterReducer(state.visibilityFilter, action) }; } ```

调用rootReducer返回state树的值，因为它只执行todosReducer和visibilityFilterReducer。每个reducer都返回一个新的状态对象。最后，combineReducers把它们合并成一个单一的state树。

通过对象扩展语法降低模块重复性

在实践中，您可能会发现自己在处理每个reducer时编写大量模板代码：

``` function reducerName(state = defaultState, action) { switch (action.type) { case MY_ACTION: return { ...state, myKey: action.payload }; default: return state; } } ```

这个开发模板称为“reducer”，您可以通过也许最常用的ECMAScript 6语法之一，对象扩展语法（object spread syntax），将公共reducer代码转移到一个单独的文件中：

``` function createNamedWrapperReducer(namedReducer, reducerName) { return (state, action) => { const newState = namedReducer(state, action); return { ...newState, reducerName }; }; } export default function createReducer(initialState, handlers) { return function reducer(state = initialState, action) { const handler = handlers[action.type]; if (!handler) return state; return { ...state, ...handler(state, action) }; }; } export { createNamedWrapperReducer }; ```

有了这个“createReducer”工具，我们现在可以生成新的reducer函数，这个reducer函数将具有常规的reducer函数工作方式，但具有统一的格式。下面是如何使用它：

``` import { createNamedWrapperReducer } from './reducerFactories'; function myReducer(state = {}, action) { switch (action.type) { default: return state; } } export default createNamedWrapperReducer(myReducer, 'myReducer'); ```

这使我们可以更轻松地编写规范化和重用的愿望的reducer工厂。

combineReducers是Redux提供的一个强大的工具，可以在应用程序中轻松管理多个状态。将多个reducer组合成一个reducer很有用，因为这样做可以提高代码的可读性和可维护性。通过分解状态树的不同部分，combineReducers可以帮助您更好地实现状态管理。然而，您需要小心在reducer中做的任何事情，因为它们将影响整个应用程序。