Que sont les actions et les reducers, et pourquoi les reducers doivent-ils être purs ?

Question

Accepted Answer

Une **action** est un objet brut décrivant *ce qui s'est passé* ; un **reducer** est une fonction pure qui prend l'état courant et une action et retourne l'état *suivant*. Ensemble, ils implémentent des transitions d'état prévisibles.

## Actions — décrivez les événements

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

Les actions ne *font* rien — ce sont des descriptions déclaratives d'événements. Les nommer au temps passé (« ajouté », « basculé ») reflète qu'elles enregistrent ce qui s'est passé.

## Reducers — calculez l'état suivant

```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 signature d'un reducer est `(state, action) => newState`. Il doit retourner un objet/tableau d'état **nouveau** (de manière immuable), jamais muter l'entrée.

## Pourquoi les reducers DOIVENT être purs

Une fonction pure : (1) retourne la même sortie pour la même entrée, et (2) n'a **aucun effet secondaire**. Les reducers doivent suivre les deux règles :

```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 pureté active les fonctionnalités signature de 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
```

Les effets secondaires (appels API, logging, aléatoire) appartiennent à **middleware** (thunks/sagas) ou aux effets — jamais dans les reducers.

## Pourquoi c'est important

Le modèle action/reducer est le cœur de la gestion d'état de style Redux et la raison pour laquelle c'est si facile à déboguer et à tester.

L'exigence de pureté n'est pas arbitraire : c'est *ce qui rend* le débogage en voyage dans le temps, la relecture d'actions, et les tests unitaires triviaux possibles, et c'est pourquoi les effets secondaires doivent vivre ailleurs.

Ce modèle d'update immuable piloté par des fonctions pures se reproduit dans Redux, NgRx, useReducer, et au-delà — le comprendre (et la discipline de garder les reducers purs) est fondamental à l'état prévisible.