Che cos'è middleware in Redux e come funzionano i thunk?

Question

Accepted Answer

**Middleware** si colloca tra il dispatch di un'azione e l'arrivo dell'azione al reducer, permettendoti di intercettare le azioni per gestire **side effect** (chiamate API asincrone, logging) — che i reducer non possono fare perché devono rimanere pure. **Thunk** sono il middleware più comune, che abilitano la logica asincrona.

## Dove si colloca il middleware

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

Il middleware avvolge `dispatch`, così ogni azione passa attraverso di esso prima di raggiungere i reducer. Questo è il luogo designato per i side effect che i reducer proibiscono.

## Il problema che i thunk risolvono

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

Hai bisogno di un posto dove fare lavoro asincrono (fetch) e poi dispatchare il risultato. Il middleware thunk permette di dispatchare una **funzione** invece di un oggetto semplice.

## Un thunk — una funzione che riceve 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());
```

Il thunk esegue il lavoro asincrono e dispatchata azioni semplici (`loading`/`loaded`/`error`) a ogni stadio — mantenendo i reducer puri mentre il side effect vive nel thunk.

## Altri usi di middleware e alternative

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

## Perché è importante

Il middleware è il modo in cui Redux gestisce tutto ciò che i reducer non possono — in particolare **side effect asincroni** — preservando la purezza che rende i reducer prevedibili e testabili.

I thunk sono il modo standard e accessibile per fare asincrono (fetching di dati, dispatchare azioni loading/success/error).

Capire la pipeline del middleware e il pattern thunk è essenziale per le app Redux reali, poiché quasi tutte hanno bisogno di caricare dati; `createAsyncThunk` di RTK si basa esattamente su questo.