Что такое action и reducer в Redux, как обычно выглядит action и кто именно возвращает новый state?

1️⃣ Как кратко ответить

Action в Redux — это объект, описывающий, что произошло в приложении. Reducer — это чистая функция, которая принимает текущий state и action, и возвращает новый state. Именно reducer возвращает новый state.

2️⃣ Подробное объяснение темы

Redux — это библиотека для управления состоянием в JavaScript-приложениях, часто используемая с React. В Redux есть три основных концепции: store, action и reducer. Понимание action и reducer является ключевым для работы с Redux.

Action

Action — это простой объект, который описывает, что произошло в приложении. Он должен содержать как минимум одно свойство type, которое является строкой и описывает тип действия. Дополнительно action может содержать другие данные, необходимые для изменения состояния.

Пример action:

const incrementAction = {
  type: 'INCREMENT',
  payload: 1
};

• type: 'INCREMENT' — обязательное свойство, которое описывает тип действия. Оно помогает reducer понять, как именно нужно изменить состояние.
• payload: 1 — дополнительное свойство, которое содержит данные, необходимые для выполнения действия. В данном случае это значение, на которое нужно увеличить счетчик.

Reducer

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

Пример reducer:

const initialState = { count: 0 };
​
function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        count: state.count + action.payload
      };
    case 'DECREMENT':
      return {
        ...state,
        count: state.count - action.payload
      };
    default:
      return state;
  }
}

• state = initialState — начальное состояние, которое используется, если state не был передан.
• switch (action.type) — конструкция, которая определяет, какое действие нужно выполнить в зависимости от типа action.
• case 'INCREMENT': — если тип action равен 'INCREMENT', создается новый объект состояния, где значение count увеличивается на action.payload.
• return {...state, count: state.count + action.payload} — возвращает новый объект состояния, не изменяя старый.
• default: return state; — если тип action не распознан, возвращается текущее состояние без изменений.

Reducer — это именно та часть Redux, которая возвращает новый state. Он определяет, как состояние приложения изменяется в ответ на actions, и обеспечивает предсказуемость изменений состояния.