Редюсер (reducer) — это чистая функция, которая принимает предыдущее состояние и экшен (state и action) и возвращает следующее состояние (новую версию предыдущего).

;(previousState, action) => newState

Если previousState - underfined , то нужно вернуть первоначальный (initial) state .

Редьюсеры должны быть чистыми функциями, то есть они не должны изменять состояние напрямую, а только возвращать новый объект состояния. Это обеспечивает предсказуемость и консистентность в приложении и упрощает отладку и тестирование.

Функция называется редюсером (reducer) потому, что ее можно передать в Array.prototype.reduce(reducer, ?initialValue).

В reducer никогда нельзя:

  • Непосредственно изменять то, что пришло в аргументах функции;
  • Выполнять какие-либо сайд-эффекты: обращаться к API или осуществлять переход по роутам;
  • Вызывать не чистые функции, например Date.now() или Math.random().

Вот пример простого редьюсера, который обрабатывает действие INCREMENT и увеличивает счетчик на 1:

function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case "INCREMENT":
      return { ...state, count: state.count + 1 }
    default:
      return state
  }
}

Reducer является ключевым элементом в управлении состоянием приложения и позволяет обрабатывать действия, которые изменяют состояние приложения. Он может быть объединен с другими reducer’ами с помощью функции combineReducers для управления состоянием всего приложения в единый редьюсер (root reducer).

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


Назад