combineReducers()

combineReducers(reducers)

随着您的应用程序变得越来越复杂，您需要将您的减少功能分解为单独的功能，每个功能都管理着独立的状态部分。

combineReducers辅助函数将一个对象，其值是从不同的减少函数转换成你可传递到createStore的一个单一减小函数。

生成的缩减器调用每个子缩减器，并将其结果收集到单个状态对象中。状态对象的形状与传递的reducers键相匹配 。

因此，状态对象将如下所示：

{
  reducer1: ...
  reducer2: ...
}

您可以通过对传递对象中的减速器使用不同的键来控制状态键名称。例如，您可能会调用combineReducers{ todos: myTodosReducer, counter: myCounterReducer })状态为{ todos, counter }。

一种流行的惯例是在状态切片管理后命名缩减器，因此您可以使用 ES6 属性速记符号：combineReducers{ counter, todos })。这相当于写combineReducers{ counter: counter, todos: todos })。

Flux 用户注意事项

参数

reducers（Object）：一个对象，其值与需要合并为一个的不同缩减函数相对应。请参阅下面的注释，了解减速器必须遵循的每个规则。之前的文档建议使用 ES6 import * as reducers语法来获取 reducer 对象。这是很多混淆的原因，这就是为什么我们现在推荐输出使用从reducers/index.js替换成的combineReducers()从而获得的单个减速器。下面是一个例子。返回值（函数）：调用reducers对象内每个 Reducer 内的每个 Reducer，并构造一个具有相同形状的状态对象。注意这个函数有点顽固，并倾向于帮助初学者避免常见的陷阱。这就是为什么它试图强制执行一些你不必遵循的规则，如果你手动编写根 reducer。传递给combineReducers的任何 reducer 必须满足这些规则：

2. 对于任何未被识别的动作，它必须将给定的state返回值作为第一个参数。

它永远不会返回undefined。通过一个早期的return语句很容易做错，所以如果你这样做会引发combineReducers错误，而不是让错误在其他地方出现。

如果它的state给定undefined的话，它必须返回这个特定减速器的初始状态。根据之前的规则，初始状态也不能是undefined。使用ES6可选参数语法指定它很方便，但您也可以显式检查第一个参数是否存在undefined。

尽管combineReducers试图检查你的减速器是否符合这些规则中的一部分，但你应该记住它们，并尽力遵循它们。combineReducers通过传递undefined给他们来检查你的减速器；即使您指定了初始状态，也会执行Redux.createStore(combineReducers(...), initialState)操作。因此，即使您从未打算让他们实际接收在您的代码undefined，您也必须确保您的减速器在接收undefined状态时正常工作。

示例

reducers/todos.js

export default function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return state.concat([action.text])
    default:
      return state
  }
}

reducers/counter.js

export default function counter(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

reducers/index.js

import { combineReducers } from 'redux'
import todos from './todos'
import counter from './counter'

export default combineReducers{
  todos,
  counter
})

App.js

import { createStore } from 'redux'
import reducer from './reducers/index'

let store = createStore(reducer)
console.log(store.getState())
// {
//   counter: 0,
//   todos: []
// }

store.dispatch{
  type: 'ADD_TODO',
  text: 'Use Redux'
})
console.log(store.getState())
// {
//   counter: 0,
//   todos: [ 'Use Redux' ]
// }

提示

这个帮助只是一个方便！你可以写你自己工作方式不同的combineReducers，甚至手工组装从子减速状态对象，并明确写入根还原功能，就像你会写任何其他函数。

您可以调用combineReducers减速器层次结构的任何级别。它不必在顶部发生。事实上，您可能会再次使用它来将太复杂的子减速器拆分为独立的孙减速器，等等。