Middleware হল dispatch করা action এবং action reducer-এ পৌঁছানোর মধ্যে একটি স্তর, যা আপনাকে actions intercept করতে এবং side effects (async API calls, logging) সামলাতে দেয় — যা reducers করতে পারে না কারণ তাদের বিশুদ্ধ থাকতে হবে। 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-এ পৌঁছানোর আগে এর মধ্য দিয়ে যায়। এটি সেই নির্ধারিত স্থান যেখানে reducers যেসব side effects নিষেধ করে।
// 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 বিশুদ্ধ রেখে যখন 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 — যখন সেই বিশুদ্ধতা রক্ষা করে যা reducers কে পূর্বাভাসযোগ্য এবং পরীক্ষাযোগ্য করে তোলে।
Thunks হল async করার জন্য মান, সহজবোধ্য উপায় (ডেটা fetch করা, loading/success/error actions dispatch করা)।
Middleware pipeline এবং thunk pattern বোঝা প্রকৃত Redux অ্যাপের জন্য অপরিহার্য, কারণ তাদের প্রায় সবাইকে ডেটা লোড করতে হয়; RTK-এর createAsyncThunk ঠিক এটির উপর নির্মিত।