`combineReducers(reducers)`

アプリケーションが複雑になって、reducing functionをstateのキーごとに関数に分割したいとします。

combineReducers関数はobjectが持つ複数のreducing functionをcreateStoreへ渡すことができる1つの関数に変換します。

combineReducers関数の戻り値のreducerは各子reducerを実行して、その結果を1つのstate objectにまとめます。combineReducers()が生成するreducerが生成するstateは、combineReducers()に渡されたobjectのkeyをkeyにします。そして、objectの各keyに格納されているreducerの結果をそのkeyの値にします。

例:

rootReducer = combineReducers({potato: potatoReducer, tomato: tomatoReducer})
// rootReducerは以下のstate objectを生成します。
{
  potato: {
    // ... potatoReducerが生成したstate
  },
  tomato: {
    // ... tomatoReducerが生成したstate
  }
}

combineReducers()に渡すobjectのkey名を指定することで、stateのkey名を指定することができます。例えば、combineReducers({ todos: myTodosReducer, counter: myCounterReducer })を実行した場合、stateを形状は{ todos, counter }になります。

A popular convention is to name reducers after the state slices they manage, so you can use ES6 property shorthand notation: 一般的に、reducerの関数名はそれが管理するstateの該当部分の名前にします。そうすると、ES 2015のshorthand記法を使って次のように記述することができます。 combineReducers({ counter, todos })。これはcombineReducers({ counter: counter, todos: todos })と等価です。

Arguments

reducers (Object): 複数のreducing functionを持つobjectです。reducing functionはcombineReducers()によって1つにまとめられます。objectに格納されるreducing functionの注意点が以下にあります。

Returns

(Function): 引数のreducers objectに格納されているすべてのreducerを実行するreducerで、reducers objectと同じ形状のstate objectを生成するreducer

注意点

combineReducersに渡されるreducerは以下のルールを満たす必要があります。

reducerの対象外のactionの場合、reducerの第1引数のstateを返す必要があります。
undefinedを返してはいけません。単なるreturn文で間違えることはよくあることです。reducerがundefinedを返した場合、errorをthrowします。
reducerの第1引数のstateの値がundefinedである場合、reducerはinital stateを返す必要があります。前述のルールに従うとinitial stateはundefinedではない必要があります。ES 2015のデフォルト引数を使うことをお勧めしますが、明示的に第1引数がundefinedか確認することもできます。

combineReducersはこれらのルールの一部に関して渡されたreducerが適合しているか確認しますが、これらを覚えて、それに従うようにしてください。combineReducersは渡されたreducerにundefinedを渡して確認します。これはinitial stateをRedux.createStore(combineReducers(...), initialState)のように指定した場合でも行われます。だから、必ず、意図せずreducerの第1引数のstateがundefinedになった場合でも、正常に動作するようにreducerを実装してください。

Example

`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'

const 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' ]
// }

License

Japanese part

Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)

Other

The MIT License (MIT)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.