> Как работают редьюсеры в Redux (JavaScript)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: SmartWay

Стек: JavaScript

> Пример ответа

Редьюсеры в Redux - это чистые функции, которые принимают текущее состояние (state) и действие (action), и возвращают новое состояние. Они работают по принципу: (state, action) => newState. Основная задача редьюсера - определить, как изменить состояние в ответ на конкретное действие, не мутируя исходное состояние, а создавая его копию.

Типичный редьюсер использует конструкцию switch для проверки поля action.type. Если тип совпадает, возвращается новый объект состояния с обновлёнными данными (часто через spread-оператор или Object.assign). Если тип не найден, возвращается текущее состояние (по умолчанию). Важно, что редьюсер не должен иметь побочных эффектов (например, запросов к API) - он синхронен и детерминирован.

Пример:

JAVASCRIPT
const initialState = { count: 0 };

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

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