¿Qué es middleware en Redux y cómo funcionan los thunks?

Question

Accepted Answer

**Middleware** se encuentra entre el envío de una acción y la acción que llega al reducer, permitiéndote interceptar acciones para manejar **efectos secundarios** (llamadas API asincrónicas, logging) — lo que los reducers no pueden hacer porque deben mantenerse puros. **Thunks** es el middleware más común, habilitando lógica asincrónica.

## Dónde encaja middleware

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

Middleware envuelve `dispatch`, por lo que cada acción pasa a través de él antes de llegar a los reducers. Este es el lugar designado para los efectos secundarios que los reducers prohíben.

## El problema que resuelven los thunks

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

Necesitas un lugar para hacer trabajo asincrónico (fetch) y luego enviar el resultado. El middleware thunk permite enviar una **función** en lugar de un objeto plano.

## Un thunk — una función que obtiene 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());
```

El thunk realiza el trabajo asincrónico y envía acciones planas (`loading`/`loaded`/`error`) en cada etapa — manteniendo los reducers puros mientras el efecto secundario vive en el thunk.

## Otros usos de middleware y alternativas

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

## Por qué es importante

Middleware es cómo Redux maneja todo lo que los reducers no pueden — especialmente **efectos secundarios asincrónico** — mientras preserva la pureza que hace que los reducers sean predecibles y comprobables.

Los Thunks son la forma estándar y comprensible de hacer asincronía (obtener datos, enviar acciones loading/success/error).

Entender la pipeline de middleware y el patrón thunk es esencial para aplicaciones Redux reales, ya que casi todas necesitan cargar datos; el `createAsyncThunk` de RTK se construye exactamente sobre esto.