Редюсеры (Reducers)

При запуске действия обязательно что-то происходит и состояние приложения изменяется. Это работа редюсеров.

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

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

Чего не должен делать редюсер

Редюсер — это всегда чистая функция, поэтому он не должен:

• мутировать аргументы;

• мутировать состояние. Вместо этого создаётся новое состояние с помощью Object.assign({}, ...);

• иметь побочные эффекты (никаких API-вызовов с какими-либо изменениями);

• вызывать нечистые функции. Это функции, результат которых зависит от чего-то кроме их аргументов (например, Date.now() или Math.random()).

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

Начнем с определения начального состояния (initial state).

В первый раз Redux вызовет редюсер с неопределенным состоянием(state === undefined).

const initialState = {
  email: "",
  msg: "",
  formDataHasError: false
};

Теперь давайте начнем обрабатывать действие SET_EMAIL. Все, что нужно сделать — это вызвать action setEmail и изменить тем самым состояние приложения. Это просто:

function contactFormReducer(state = initialState, action) {
  switch (action.type) {
    case "SET_EMAIL":
      return {
        ...state,
        email: action.payload
      };

    case "SET_MESSAGE":
      return {
        ...state,
        msg: action.payload
      };

    default:
      return state
  }
}

Компоновка редюсеров

import { combineReducers } from 'redux'

export default combineReducers({
  cartReducer,
  filterReducer,
  contactFormReducer
})

Все, что делает combineReducers() — это генерирует функцию, которая вызывает ваши редюсеры, передавая им в качестве одного из аргументов срез глобального состояния, который выбирается в соответствии с именем его ключа в глобальном состоянии, и затем снова собирает результаты всех вызовов в один объект.