Middleware sitter mellan dispatchningen av en action och actionens väg till reducern, vilket låter dig avlyssna actions för att hantera bieffekter (asynkrona API-anrop, loggning) — något som reducers inte kan göra eftersom de måste förbli rena. Thunks är den vanligaste middleware och möjliggör asynkron logik.
dispatch(action) → [ middleware 1 → middleware 2 → ... ] → reducer → store
(can inspect, modify, delay, or stop actions; do side effects)
Middleware omsluter dispatch, så varje action går igenom den innan den når reducers. Detta är den utpekade platsen för bieffekter som reducers förbjuder.
// 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 behöver en plats för att göra asynkront arbete (fetch) och sedan dispatchna resultatet. Thunk middleware låter dig dispatchna en funktion istället för ett vanligt 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ör det asynkrona arbetet och dispatchnar vanliga actions (loading/loaded/error) i varje steg — vilket håller reducers rena medan bieffekten 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 är hur Redux hanterar allt som reducers inte kan — särskilt asynkrona bieffekter — samtidigt som den bevarar renheten som gör reducers förutsägbar och testbar.
Thunks är standardmetoden, en enkel väg att göra asynkront arbete (hämta data, dispatchna actions för loading/success/error).
Att förstå middleware-pipelinen och thunk-mönstret är väsentligt för verkliga Redux-applikationer, eftersom nästan alla måste ladda data; RTK:s createAsyncThunk bygger på just detta.