Cosa sono le actions e i reducers, e perché i reducers devono essere pure?

Question

Accepted Answer

Un'**action** è un oggetto semplice che descrive *cosa è accaduto*; un **reducer** è una funzione pura che prende lo stato attuale e un'action e restituisce lo stato *successivo*. Insieme implementano transizioni di stato prevedibili.

## Actions — descrivono eventi

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

Le actions non *fanno* nulla — sono descrizioni dichiarative di eventi. Nominarle al passato ("added", "toggled") riflette il fatto che registrano cosa è accaduto.

## Reducers — calcolano lo stato successivo

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

La firma di un reducer è `(state, action) => newState`. Deve restituire un **nuovo** oggetto/array di stato (immutabilmente), mai mutare l'input.

## Perché i reducers DEVONO essere pure

Una funzione pura: (1) restituisce lo stesso output per lo stesso input, e (2) ha **nessun effetto collaterale**. I reducers devono seguire entrambe le regole:

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

La purezza abilita le caratteristiche distintive di 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
```

Gli effetti collaterali (chiamate API, logging, casualità) appartengono a **middleware** (thunks/sagas) o effects — mai nei reducers.

## Perché è importante

Il modello action/reducer è il cuore della gestione dello stato nello stile Redux ed è la ragione per cui è così debuggabile e testabile.

Il requisito di purezza non è arbitrario: è *ciò che rende* possibile il time-travel debugging, il replay delle actions e il testing unitario banale, ed è il motivo per cui gli effetti collaterali devono vivere altrove.

Questo pattern immutabile guidato da funzioni pure si ripete in Redux, NgRx, useReducer e oltre — comprenderlo (e la disciplina di mantenere i reducers puri) è fondamentale per uno stato prevedibile.