Qu'est-ce que le middleware dans Redux et comment fonctionnent les thunks ?

Question

Accepted Answer

**Middleware** se situe entre la dispatch d'une action et l'arrivée de l'action au reducer, vous permettant d'intercepter les actions pour gérer les **side effects** (appels API asynchrones, logging) — ce que les reducers ne peuvent pas faire car ils doivent rester purs. **Thunks** sont le middleware le plus courant, permettant la logique asynchrone.

## Où le middleware s'insère

```text
dispatch(action) → [ middleware 1 → middleware 2 → ... ] → reducer → store
                     (can inspect, modify, delay, or stop actions; do side effects)
```

Middleware enveloppe `dispatch`, donc chaque action passe par lui avant d'atteindre les reducers. C'est le lieu désigné pour les side effects que les reducers interdisent.

## Le problème que les thunks résolvent

```js
// reducers are pure → can't do this. Plain actions are just objects → can't either.
async function loadUsers() {
  const users = await fetch("/api/users").then(r => r.json()); // a SIDE EFFECT
  // ...need to dispatch the result into the store
}
```

Vous avez besoin d'un endroit pour faire du travail asynchrone (fetch) puis dispatcher le résultat. Le middleware thunk permet de dispatcher une **fonction** au lieu d'un objet plain.

## Un thunk — une fonction qui reçoit dispatch

```js
// a "thunk" is a function (dispatch, getState) => { ... } doing async work
function fetchUsers() {
  return async (dispatch, getState) => {
    dispatch({ type: "users/loading" });           // 1. signal loading
    try {
      const users = await api.getUsers();           // 2. async side effect
      dispatch({ type: "users/loaded", payload: users }); // 3. dispatch the result
    } catch (err) {
      dispatch({ type: "users/error", payload: err.message }); // 4. handle errors
    }
  };
}

// thunk middleware sees a FUNCTION was dispatched and calls it with dispatch/getState
store.dispatch(fetchUsers());
```

Le thunk effectue le travail asynchrone et dispatch des actions plain (`loading`/`loaded`/`error`) à chaque étape — gardant les reducers purs tandis que le side effect vit dans le thunk.

## Autres usages de middleware & alternatives

```text
✓ Logging every action, analytics, crash reporting
✓ Redux Toolkit includes thunk by default + createAsyncThunk for less boilerplate
Alternatives for complex async flows: redux-saga (generators), redux-observable (RxJS)
```

## Pourquoi c'est important

Middleware est comment Redux gère tout ce que les reducers ne peuvent pas — surtout les **side effects asynchrones** — tout en préservant la pureté qui rend les reducers prévisibles et testables.

Les thunks sont le moyen standard et accessible pour faire de l'asynchrone (récupérer des données, dispatcher des actions loading/success/error).

Comprendre le pipeline middleware et le pattern thunk est essentiel pour les vraies apps Redux, puisque presque toutes ont besoin de charger des données ; `createAsyncThunk` de RTK s'appuie sur exactement cela.