Redux میں middleware کیا ہے اور thunks کیسے کام کرتے ہیں؟

Question

Accepted Answer

**Middleware** dispatch کیے جانے والی action اور reducer تک پہنچنے والی action کے درمیان بیٹھی ہے، جو آپ کو actions کو intercept کرنے دیتی ہے تاکہ **side effects** (async API calls، logging) کو سنبھالا جا سکے — جو reducers نہیں کر سکتے کیونکہ انہیں pure رہنا چاہیے۔ **Thunks** سب سے عام middleware ہیں، جو async logic کو enable کرتے ہیں۔

## Middleware کہاں فٹ ہوتا ہے

```text
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 منع کرتے ہیں۔

## وہ مسئلہ جو thunks حل کرتے ہیں

```js
// 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 کے۔

## ایک thunk — ایک function جو dispatch حاصل کرتا ہے

```js
// 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 میں رہتا ہے۔

## دیگر middleware استعمال اور alternatives

```text
✓ 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 کرنے کا معیاری، قابل فہم طریقہ ہیں (ڈیٹا fetch کرنا، loading/success/error actions dispatch کرنا)۔

Middleware pipeline اور thunk pattern کو سمجھنا حقیقی Redux apps کے لیے ضروری ہے، کیونکہ تقریباً سب کو ڈیٹا لوڈ کرنے کی ضرورت ہے؛ RTK کا `createAsyncThunk` بالکل اسی پر بنایا گیا ہے۔