O que é middleware em Redux e como funcionam thunks?

Question

Accepted Answer

**Middleware** fica entre enviar uma action e a action chegar ao reducer, permitindo que você intercepte actions para lidar com **side effects** (chamadas assíncronas de API, logging) — que reducers não podem fazer porque devem permanecer puros. **Thunks** são o middleware mais comum, permitindo lógica assíncrona.

## Como middleware se encaixa

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

Middleware envolve `dispatch`, então cada action passa por ele antes de chegar aos reducers. Este é o lugar designado para os side effects que reducers proíbem.

## O problema que thunks resolvem

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

Você precisa de um lugar para fazer trabalho assíncrono (fetch) e depois disparar o resultado. O middleware thunk permite disparar uma **função** em vez de um objeto simples.

## Um thunk — uma função que recebe 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());
```

O thunk executa o trabalho assíncrono e dispara actions simples (`loading`/`loaded`/`error`) em cada etapa — mantendo reducers puros enquanto o side effect vive no thunk.

## Outros usos de middleware e 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 que isso importa

Middleware é como Redux lida com tudo que reducers não podem — especialmente **side effects assíncronos** — preservando a pureza que torna reducers previsíveis e testáveis.

Thunks são a forma padrão e acessível de fazer código assíncrono (buscar dados, disparar actions de loading/sucesso/erro).

Entender o pipeline de middleware e o padrão thunk é essencial para apps Redux reais, já que quase todos precisam carregar dados; o `createAsyncThunk` do RTK é construído exatamente sobre isso.