Ce este middleware în Redux și cum funcționează thunk-urile?

Question

Accepted Answer

**Middleware** stă între dispatching unei acțiuni și ajungerea acțiunii la reducer, permițându-ți să interceptezi acțiuni pentru a gestiona **efecte secundare** (apeluri API asincrone, logging) — pe care reducers nu le pot face pentru că trebuie să rămână pure. **Thunk-urile** sunt cel mai frecvent middleware, permițând logica asincronă.

## Unde se potrivește middleware

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

Middleware-ul înfășoară `dispatch`, deci fiecare acțiune trece prin el înainte de a ajunge la reducers. Acesta este locul desemnat pentru efectele secundare pe care reducers le interzic.

## Problema pe care o rezolvă thunk-urile

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

Ai nevoie de un loc pentru a face lucrări asincrone (fetch) și apoi să dispatchez rezultatul. Middleware-ul thunk permite dispatching unei **funcții** în loc de un obiect simplu.

## Un thunk — o funcție care primește 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());
```

Thunk-ul efectuează lucrarea asincronă și dispatchez acțiuni simple (`loading`/`loaded`/`error`) în fiecare etapă — menținând reducers pure în timp ce efectul secundar trăiește în thunk.

## Alte utilizări ale middleware și 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)
```

## De ce conteaza

Middleware este modul în care Redux gestionează tot ce reducers nu pot — în special **efectele secundare asincrone** — în timp ce preservează puritatea care face reducers previzibili și testabili.

Thunk-urile sunt modalitatea standard, accesibilă pentru a face lucrări asincrone (preluarea datelor, dispatching acțiunilor loading/success/error).

Înțelegerea pipeline-ului middleware și modelul thunk este esențial pentru aplicații Redux reale, deoarece aproape toate au nevoie să încarce date; `createAsyncThunk` al RTK se construiește pe exact aceasta.