Как только ваше приложение становится все более сложным, вы захотите разделить ваш функцию редьюсер на отдельные функции, которые управляют независимыми частями состояния.
Вспомогательная функция combineReducers
преобразует объект, значениями которого являются различные функции редьюсеры, в одну функцию редьюсер, которую можно передать в метод createStore
.
Результирующий редьюсер вызывает вложенные редьюсеры и собирает их результаты в единый объект состояния.
Состояние, созданное именами combineReducers()
, сохраняет состояние каждого редуктора под их ключами, переданные в combineReducers()
Пример:
rootReducer = combineReducers({potato: potatoReducer, tomato: tomatoReducer})
// Это создаст следующий объект состояния
{
potato: {
// ... potatoes и другое состояние управляемое potatoReducer ...
},
tomato: {
// ... tomatoes и другое состояние управляемое tomatoReducer, возможно, какой-нибудь хороший соус? ...
}
}
Вы можете управлять именами ключей состояний, используя разные ключи для редьюсеров в переданном объекте. Например, вы можете называть combineReducers({ todos: myTodosReducer, counter: myCounterReducer })
для формы состояния как {todos, counter}
.
Популярное соглашение - назвать редьюсеры после разделения состояний, которыми они управляют, поэтому вы можете использовать сокращенную обозначение свойства ES6: combReducers ({counter, todos})
. Это эквивалентно написанию combReducers ({counter: counter, todos: todos})
.
Эта функция поможет вам организовать ваши редьюсеры для управления их собственными частями состояния, подобно тому, как вы бы имели различные Flux сторы для управления разными состояниями. С Redux у вас есть только один стор, но
combineReducers
помогает вам сохранять такое же логическое разделение между редьюсерами.
reducers
(Object): объект, значения которого соответствуют различным функциям редьюсерам, которые должны быть объединены в один. Ниже идут примечания для некоторых правил, которым должен следовать каждый переданный редьюсер.
Ранее документация предлагала использовать ES6-синтаксис
import * as reducers
для получения объекта редьюсеров. Это было источником многочисленной путаницы, поэтому сейчас рекомендуется экспортировать один редьюсер, полученный с помощьюcombineReducers()
изreducers/index.js
вместо этого. Ниже приведен пример.
(* Function *): редьюсер, который вызывает каждый редьюсер внутри объекта reducers
и создает объект состояния с той же формой.
Эта функция слегка самоуверенная и искажена, чтобы помочь новичкам избежать общих ошибок. Именно поэтому она пытается применять некоторые правила, которым не нужно следовать, если вы пишете корневой редьюсер вручную.
Любой редьюсер передаваемый combineReducers
должен соответствовать этим правилам:
-
Для любых экшенов, которые не определены, он должен возвращать
state
, переданный ему в качестве первого аргумента. -
Он никогда не должен возвращать
undefined
. Это очень легко сделать по ошибке через предыдущиеreturn
, поэтомуcombineReducers
создает исключение, если вы сделали это, предотвращая появление ошибки где-нибудь еще. -
Если
state
переданный емуне определен (undefined)
, то он должен возвратить начальное состояние (state) для этого конкретного редьюсера. Согласно предыдущему правилу, начальное состояние (state) не должно быть равноundefined
. Это удобно указывать с ES6-синтаксисом опциональных аргументов, но вы можете также явно проверить первый аргумент наundefined
.
В то время как combineReducers
пытается проверить, что ваши редьюсеры соответствуют некоторым из этих правил, вам следует помнить о них и сделать все возможное, чтобы следовать им. combineReducers
проверит ваши редьюсеры, передав им undefined
; это делается, даже если вы указываете начальное состояние на Redux.createStore(combineReducers(...), initialState)
. Поэтому вы должны гарантировать, что ваши редьюсеры будут работать должным образом при получении undefined
в качестве state, даже если вы никогда не намереваетесь фактически получить undefined
в своем собственном коде.
export default function todos(state = [], action) {
switch (action.type) {
case 'ADD_TODO':
return state.concat([action.text])
default:
return state
}
}
export default function counter(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1
case 'DECREMENT':
return state - 1
default:
return state
}
}
import { combineReducers } from 'redux'
import todos from './todos'
import counter from './counter'
export default combineReducers({
todos,
counter
})
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' ]
// }
-
Этот помощник – это всего лишь удобство! Вы можете написать свой собственный
combineReducers
который работает иначе или даже вручную собрать объект состояния из вложенного редьюсера и написать родительскую функцию-редьюсер явно, как можно было бы написать любую другую функцию. -
Вы можете вызвать
combineReducers
на любом уровне иерархии редьюсера. Это не обязательно должно произойти наверху. На самом деле, вы можете использовать его снова, чтобы разделить "детские" редьюсеры, которые получаются слишком сложными, на независимых "внуков" и так далее.