Wat is middleware in Redux en hoe werken thunks?

Question

Accepted Answer

**Middleware** zit tussen het dispatchen van een action en het bereiken van de reducer, zodat je actions kunt onderscheppen om **side effects** af te handelen (async API-aanroepen, logging) — wat reducers niet kunnen doen omdat ze puur moeten blijven. **Thunks** zijn de meest voorkomende middleware, waarmee async logica mogelijk is.

## Waar middleware past

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

Middleware wrapped `dispatch`, dus elke action gaat erlangs voordat deze reducers bereikt. Dit is de aangewezen plek voor de side effects die reducers verbieden.

## Het probleem dat thunks oplossen

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

Je hebt een plek nodig om async werk te doen (fetch) en daarna het resultaat te dispatchen. Thunk middleware stelt je in staat een **functie** te dispatchen in plaats van een gewoon object.

## Een thunk — een functie die dispatch krijgt

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

De thunk voert het async werk uit en dispatcht plain actions (`loading`/`loaded`/`error`) in elk stadium — waardoor reducers puur blijven terwijl de side effect in de thunk leeft.

## Ander middleware-gebruik & alternatieven

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

## Waarom het belangrijk is

Middleware is hoe Redux alles afhandelt wat reducers niet kunnen — vooral **async side effects** — terwijl de zuiverheid behouden blijft die reducers voorspelbaar en testbaar maakt.

Thunks zijn de standaard, begrijpelijke manier om async af te handelen (gegevens ophalen, loading/success/error actions dispatchen).

Het begrijpen van de middleware pipeline en het thunk patroon is essentieel voor echte Redux-apps, omdat bijna allemaal gegevens moeten laden; RTK's `createAsyncThunk` bouwt voort op precies dit.