Блог

Я просматриваю некоторый код в приложении React-Redux и обнаружил, что в хранилище Redux есть три состояния, и изменения в каждом состоянии обрабатываются разными редукторами (combine reducers). Аналогично следующему:

src/ модели

 --model1
--model2
--model3
  

src/reducers/index.js

 const rootReducer = combineReducers({
  model1Reducer,
  model2Reduce,
  model3Reducer
 })
  

src/ reducers/model1Reducer

 // import model1 here
const model1Reducer = (state = model1, action) { }
  

Аналогично, model2Reducer и model3Reducer импортируют model2 и model3 соответственно и действуют на них.

Подходит ли этот метод определения трех разных деревьев состояний в Redux? Один из принципов Redux — единый источник истины. Тогда как это нормально?

То, что вы описали здесь, является правильным способом использования redux и таким же, как мы используем его в моей организации.

Смысл принципа «Единый источник истины» заключается в

упростите создание универсальных приложений, поскольку состояние с вашего сервера может быть сериализовано и перенесено в клиент без дополнительных усилий по кодированию.

Мы используем combinedReducers, чтобы разделить часть нашего приложения по логике и избежать ситуации, когда reducer становится сложным с точки зрения обновления хранилища. Это не означает, что выполнение этого разделит хранилище на несвязанные состояния. Каждый из них управляет независимыми частями вашего хранилища. Это «просто» делает наш код более читаемым и модульным с точки зрения обслуживания.

Вот часть документации Redux, которая объясняет концепцию комбинированных редукторов

По мере усложнения вашего приложения вам захочется разделить вашу функцию уменьшения на отдельные функции, каждая из которых управляет независимыми частями состояния.

Вспомогательная функция combineReducers превращает объект, значения которого являются различными функциями уменьшения, в единую функцию уменьшения, которую вы можете передать в createStore.

Результирующий редуктор вызывает каждый дочерний редуктор и собирает их результаты в единый объект состояния.

Вот правила для редукторов:

1. Должно возвращать любое значение, кроме ‘undefined’.
2. Создает «состояние» или данные, которые будут использоваться внутри вашего приложения, используя только предыдущее состояние и действие.
3. Не должно выходить за пределы самого себя, чтобы решить, какое значение возвращать.
4. Не должен изменять свой входной аргумент state.

Ваш combineReducers будет выглядеть следующим образом:

 export default combineReducers({
  property1: model1Reducer,
  property2: model2Reduce,
  property3: model3Reducer
}
  

Ваш конкретный редуктор будет выглядеть следующим образом:

 export default () => {
  return 123;
}
  

Итак, чего я не показал выше, так это синтаксиса ES2015 ( selectedSong = null ), где вы делаете что-то вроде этого:

 const selectedSongReducer = (selectedSong = null, action) => {
  if (action.type === 'SELECTED_SONG') {
    return action.payload;
  }

  return selectedSong;
}
  

Это следует правилу 1, где мы должны возвращать любое значение, кроме undefined , потому что, если мы этого не сделаем, мы получим undefined при загрузке приложения, поэтому мы реализуем значения аргументов по умолчанию из ES6 / ES2015.

Значение по умолчанию необязательно null , это может быть пустой массив, строка или объект, в зависимости от контекста вашего редуктора.

При втором вызове вашего редуктора его больше не будет undefined , первым аргументом будет то, что он вернул при последнем запуске.

Единственное, что меняется при вызове редуктора, — это объект actions.