Middleware sidder mellem afsendelse af en action og actionen når til reduceren, og lader dig opfange actions for at håndtere side effects (async API-kald, logging) — hvilket reducers ikke kan gøre, fordi de skal forblive rene. Thunks er den mest almindelige middleware, der muliggør async logik.
dispatch(action) → [ middleware 1 → middleware 2 → ... ] → reducer → store
(can inspect, modify, delay, or stop actions; do side effects)
Middleware omslutter dispatch, så hver action går gennem den før den når reducers. Dette er det udpegede sted for side effects, som reducers forurener.
// 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 skal have et sted at udføre async arbejde (fetch) og derefter sende resultatet. Thunk middleware tillader afsendelse af en funktion i stedet for et simpelt objekt.
// 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());
Thunken udfører async arbejdet og sender plain actions (loading/loaded/error) i hver fase — som holder reducers rene, mens side effecten bor i thunken.
✓ 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)
Middleware er hvordan Redux håndterer alt, som reducers ikke kan — især async side effects — mens den bevarer den renhed, som gør reducers forudsigelige og testbare.
Thunks er den standard, forståelige måde at gøre async på (henting af data, afsendelse af loading/success/error actions).
At forstå middleware pipeline og thunk-mønstret er essentiel for virkelige Redux-apps, da næsten alle af dem skal indlæse data; RTK's createAsyncThunk bygger på præcis dette.