Middleware action को dispatch करने और 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 करने देता है plain 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 काम करता है और plain 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 हर चीज को handle करता है जो reducers नहीं कर सकते — विशेष रूप से async side effects — जबकि purity को संरक्षित करता है जो reducers को predictable और testable बनाती है।
Thunks async के लिए मानक, approachable तरीका है (डेटा fetch करना, loading/success/error actions dispatch करना)।
Middleware pipeline और thunk pattern को समझना वास्तविक Redux apps के लिए आवश्यक है, क्योंकि लगभग सभी को डेटा लोड करने की आवश्यकता है; RTK का createAsyncThunk बिल्कुल इसी पर बनाया गया है।