Что такое действия (actions) и редьюсеры (reducers), и почему редьюсеры должны быть чистыми?

Question

Accepted Answer

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

## Действия — описывают события

```js
// just data: a `type` (required) + any payload
{ type: "todos/added", payload: { id: 1, text: "Learn Redux" } }
{ type: "todos/toggled", payload: 1 }
```

Действия ничего не *делают* — это декларативные описания событий. Их названия в виде фактов в прошедшем времени ("added", "toggled") отражают то, что они записывают то, что произошло.

## Редьюсеры — вычисляют следующее состояние

```js
function todosReducer(state = [], action) {
  switch (action.type) {
    case "todos/added":
      return [...state, action.payload];              // new array
    case "todos/toggled":
      return state.map(t =>                             // new array, new object for the changed one
        t.id === action.payload ? { ...t, done: !t.done } : t
      );
    default:
      return state;                                     // unknown action → unchanged
  }
}
```

Сигнатура редьюсера: `(state, action) => newState`. Он должен возвращать **новый** объект/массив состояния (иммутабельно), никогда не мутировать входные данные.

## Почему редьюсеры ДОЛЖНЫ быть чистыми

Чистая функция: (1) возвращает одинаковый результат для одинаковых входных данных и (2) **не имеет побочных эффектов**. Редьюсеры должны следовать обоим правилам:

```js
// ❌ NOT pure — breaks everything
function badReducer(state, action) {
  state.value++;              // ❌ mutates input (breaks change detection, time-travel)
  fetch("/api/log");          // ❌ side effect (non-deterministic, untestable)
  return { value: Math.random() }; // ❌ non-deterministic output
}
```

Чистота позволяет Redux использовать свои фирменные возможности:

```text
✓ Predictability   — same state + action ALWAYS gives the same result
✓ Time-travel / replay — you can re-run actions to reproduce any state
✓ Testability      — just call reducer(state, action) and assert; no mocks needed
✓ Change detection — returning new references lets the UI detect changes
```

Побочные эффекты (вызовы API, логирование, случайность) должны находиться в **middleware** (thunks/sagas) или effects — никогда в редьюсерах.

## Почему это важно

Модель action/reducer — это сердце управления состоянием в стиле Redux и причина, по которой оно настолько отлаживаемо и тестируемо.

Требование чистоты — не произвольно: именно это *делает возможным* отладку с перемоткой времени (time-travel debugging), воспроизведение действий и тривиальное модульное тестирование, и поэтому побочные эффекты должны находиться в другом месте.

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