Middleware se nachází mezi odesláním action a dosažením action ke reduceru, což vám umožňuje zachytit actions na zpracování vedlejších efektů (asynchronní volání API, logování) — což reducery nemohou dělat, protože musí zůstat čisté. Thunky jsou nejčastějším middlewarem, který umožňuje asynchronní logiku.
dispatch(action) → [ middleware 1 → middleware 2 → ... ] → reducer → store
(can inspect, modify, delay, or stop actions; do side effects)
Middleware obklopuje dispatch, takže každá action jí projde předtím, než dosáhne reducerů. Toto je určené místo pro vedlejší efekty, které reducery zakazují.
// 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
}
Potřebujete místo pro asynchronní práci (fetch) a následné odeslání výsledku. Thunk middleware umožňuje odeslat funkci místo prostého objektu.
// 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());
Thunk provede asynchronní práci a odešle prostý actions (loading/loaded/error) v každé fázi — zachováním čistoty reducerů, zatímco vedlejší efekt žije v thunku.
✓ 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 je způsob, jak Redux zpracovává vše, co reducery nemohou — obzvláště asynchronní vedlejší efekty — při zachování čistoty, která dělá reducery předvídatelnými a testovatelními.
Thunky jsou standardní, srozumitelný způsob, jak dělat asynchronní operace (načítání dat, odesílání loading/success/error actions).
Porozumění pipeline middlewaru a thunk patternu je nezbytné pro skutečné Redux aplikace, protože téměř všechny potřebují načítat data; RTK createAsyncThunk je postaven na přesně tomto.