What are actions and reducers, and why must reducers be pure?

Question

Accepted Answer

An **action** is a plain object describing *what happened*; a **reducer** is a pure function that takes the current state and an action and returns the *next* state. Together they implement predictable state transitions.

## Actions — describe events

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

Actions don't *do* anything — they're declarative descriptions of events. Naming them as past-tense facts ("added", "toggled") reflects that they record what happened.

## Reducers — compute the next state

```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
  }
}
```

A reducer's signature is `(state, action) => newState`. It must return a **new** state object/array (immutably), never mutate the input.

## Why reducers MUST be pure

A pure function: (1) returns the same output for the same input, and (2) has **no side effects**. Reducers must follow both rules:

```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
}
```

Purity enables Redux's signature features:

```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
```

Side effects (API calls, logging, randomness) belong in **middleware** (thunks/sagas) or effects — never in reducers.

## Why it matters

The action/reducer model is the heart of Redux-style state management and the reason it's so debuggable and testable.

The purity requirement isn't arbitrary: it's *what makes* time-travel debugging, action replay, and trivial unit testing possible, and it's why side effects must live elsewhere.

This pure-function-driven, immutable update pattern recurs across Redux, NgRx, useReducer, and beyond — understanding it (and the discipline of keeping reducers pure) is fundamental to predictable state.