Middleware ligger mellom dispatching av en action og at actionen når reduceren, slik at du kan avskjære actions for å håndtere bivirkninger (async API-kall, logging) — som reducere ikke kan gjøre fordi de må forbli rene. Thunks er den vanligste middleware, som muliggjør async logikk.
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 gjennom den før den når reducerne. Dette er det utpekte stedet for bivirkningene som reducere forbyr.
// 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 trenger et sted å gjøre async arbeid (fetch) og deretter dispatche resultatet. Thunk middleware tillater dispatching av en funksjon i stedet for et vanlig 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 utfører det async arbeidet og dispatcher vanlige actions (loading/loaded/error) på hvert trinn — og holder reducerne rene mens bivirkningen lever 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 reducerne ikke kan — især async bivirkninger — mens den bevarer renheten som gjør reducerne forutsigbare og testbare.
Thunks er standardmåten, den tilgjengelige måten å gjøre async på (hente data, dispatche loading/success/error actions).
Å forstå middleware-pipelinen og thunk-mønsteret er essensielt for ekte Redux-apper, siden nesten alle har behov for å laste data; RTK's createAsyncThunk bygger på nettopp dette.