Was ist Middleware in Redux und wie funktionieren Thunks?

Question

Accepted Answer

**Middleware** sitzt zwischen dem Versand einer Action und der Action, die den Reducer erreicht, und ermöglicht es dir, Actions abzufangen, um **Nebeneffekte** (asynchrone API-Aufrufe, Logging) zu behandeln — was Reducer nicht tun können, weil sie rein bleiben müssen. **Thunks** sind die häufigste Middleware und ermöglichen asynchrone Logik.

## Wo Middleware passt

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

Middleware umhüllt `dispatch`, sodass jede Action sie durchläuft, bevor sie Reducer erreicht. Dies ist der vorgesehene Ort für die Nebeneffekte, die Reducer verbieten.

## Das Problem, das Thunks lösen

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

Du brauchst einen Ort, um asynchrone Arbeit (fetch) zu leisten und dann das Ergebnis zu versenden. Thunk Middleware ermöglicht das Versenden einer **Funktion** statt eines einfachen Objekts.

## Ein Thunk — eine Funktion, die dispatch erhält

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

Der Thunk führt die asynchrone Arbeit durch und versendet plain Actions (`loading`/`loaded`/`error`) in jeder Phase — wodurch Reducer rein bleiben, während der Nebeneffekt im Thunk lebt.

## Weitere Middleware-Verwendungen und Alternativen

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

## Warum es wichtig ist

Middleware ist wie Redux alles behandelt, das Reducer nicht können — besonders **asynchrone Nebeneffekte** — während es die Reinheit bewahrt, die Reducer vorhersagbar und testbar macht.

Thunks sind die Standard-, verständliche Art, asynchrone Arbeit zu verrichten (Datenabruf, Versand von loading/success/error Actions).

Das Verständnis der Middleware-Pipeline und des Thunk-Musters ist für echte Redux-Apps essentiell, da fast alle Daten laden müssen; RTK's `createAsyncThunk` baut auf genau diesem auf.