Middleware inakaa kati ya kumfanya dispatch action na action kufikia reducer, na kuruhusu kukamatia actions ili kukabiliana na athari za upande (API calls za async, logging) — ambazo reducers haziwezi kufanya kwa sababu lazima zibaki safi. Thunks ni middleware ya kawaida, inayowezesha mantiki ya async.
dispatch(action) → [ middleware 1 → middleware 2 → ... ] → reducer → store
(can inspect, modify, delay, or stop actions; do side effects)
Middleware huzunguka dispatch, kwa hivyo kila action inapita kwa njia yake kabla ya kufikia reducers. Hii ndio mahali iliyotegemea para kwa athari za upande ambazo reducers zina kamatia.
// 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
}
Unahitaji mahali pa kufanya kazi ya async (fetch) na kisha kumfanya dispatch matokeo. Thunk middleware inakuruhusu kumfanya dispatch kazi badala ya kitu kinachosawazishwa.
// 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 hufanya kazi ya async na kumfanya dispatch actions za kawaida (loading/loaded/error) katika kila hatua — kuiweka reducers safi wakati athari ya upande ikiwa katika thunk.
✓ 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 ndiyo njia Redux inavyokabiliana na kila kitu ambavyo reducers haziwezi — hususan athari za async upande — wakati wa kuiga usafi ambao huwa na reducers kubaliani na kujaribu.
Thunks ni njia ya kawaida, inayofikirika ya kufanya async (kuambatanisha data, kumfanya dispatch actions za loading/success/error).
Kuelewa bomba la middleware na muundo wa thunk ni muhimu kwa apps ya Redux halisi, kwa sababu karibu zote zina haja ya kuambatanisha data; createAsyncThunk ya RTK inajengwa juu ya hili.