Middleware action dispatch અને action reducer સુધી પહોંચવા વચ્ચે બેઠું હોય છે, તમને actions ને intercept કરવા દે છે તાકી side effects (async API calls, logging) સંભાળી શકો — જે reducers કરી શકતા નથી કારણ કે તેઓ pure રહેવા જોઈએ. Thunks સૌથી સામાન્ય middleware છે, async logic સક્ષમ કરે છે.
dispatch(action) → [ middleware 1 → middleware 2 → ... ] → reducer → store
(can inspect, modify, delay, or stop actions; do side effects)
Middleware dispatch ને wrap કરે છે, તેથી દરેક action તેની વચ્ચે થાય છે reducers સુધી પહોંચવાથી પહેલે. આ side effects માટે નિયુક્ત જગ્યા છે જે reducers અટકાવે છે.
// 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
}
તમને async કામ કરવા (fetch) અને પછી પરિણામ dispatch કરવા માટે જગ્યા જોઈએ છે. Thunk middleware function dispatch કરવાની મંજૂરી આપે છે સાદા object ની જગ્યાએ.
// 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 async કામ કરે છે અને સાદા actions (loading/loaded/error) દરેક તબક્કે dispatch કરે છે — reducers ને pure રાખે છે જ્યારે side effect 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 એ છે કેવી રીતે Redux સંભાળે છે તમામ જે reducers કરી શકતા નથી — ખાસ કરીને async side effects — જ્યારે purity સંરક્ષણ કરે છે જે reducers ને predictable અને testable બનાવે છે.
Thunks async કરવા માટે માનક, અભિગમ્ય રીત છે (ડેટા લાવવું, loading/success/error actions dispatch કરવું).
Middleware pipeline અને thunk pattern સમજવું વાસ્તવિક Redux apps માટે આવશ્યક છે, કારણ કે લગભગ સાધુ બધાને ડેટા લોડ કરવાની જરૂર છે; RTK ની createAsyncThunk બરાબર આ પર બાંધવામાં આવે છે.