Redux ਵਿੱਚ middleware ਕੀ ਹੈ ਅਤੇ thunks ਕਿਵੇਂ ਕਾਮ ਕਰਦੇ ਹਨ?

Question

Accepted Answer

**Middleware** action ਨੂੰ dispatch ਕਰਨ ਅਤੇ action ਦੇ reducer ਤੱਕ ਪਹੁੰਚਣ ਦੇ ਵਿਚਕਾਰ ਬੈਠਿਆ ਹੁੰਦਾ ਹੈ, ਤੁਹਾਨੂੰ actions ਨੂੰ intercept ਕਰਨ ਲਈ **side effects** (async API calls, logging) ਨੂੰ handle ਕਰਨ ਦਿੰਦਾ ਹੈ — ਜੋ reducers ਨਹੀਂ ਕਰ ਸਕਦੇ ਕਿਉਂਕਿ ਉਹ pure ਰਹਿਣੇ ਚਾਹੀਦੇ ਹਨ। **Thunks** ਸਭ ਤੋਂ ਆਮ middleware ਹਨ, ਜੋ async logic ਨੂੰ ਸਮਰਥ ਬਣਾਉਂਦੇ ਹਨ।

## 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 ਤੱਕ ਪਹੁੰਚਣ ਤੋਂ ਪਹਿਲਾਂ ਇਸ ਨੂੰ pass ਕਰਦਾ ਹੈ। ਇਹ 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) ਕਰਨ ਲਈ ਅਤੇ ਫਿਰ result ਨੂੰ dispatch ਕਰਨ ਲਈ ਇੱਕ ਥਾਂ ਦੀ ਲੋੜ ਹੈ। Thunk middleware **function** ਨੂੰ dispatch ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ ਜਾ plain 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 ਕਾਮ ਕਰਦਾ ਹੈ ਅਤੇ ਹਰ stage ਵਿੱਚ plain actions (`loading`/`loaded`/`error`) ਨੂੰ dispatch ਕਰਦਾ ਹੈ — reducers ਨੂੰ pure ਰੱਖਦੇ ਹੋਏ ਜਦਕਿ side effect thunk ਵਿੱਚ ਰਹਿਦਾ ਹੈ।

## ਹੋਰ middleware ਵਰਤੋਂ ਅਤੇ ਵਿਕਲਪ

```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 ਸਭ ਕੁਝ ਸੰਭਾਲਦਾ ਹੈ ਜੋ reducers ਨਹੀਂ ਕਰ ਸਕਦੇ — ਖਾਸ ਤੌਰ 'ਤੇ **async side effects** — ਜਦਕਿ purity ਨੂੰ preserve ਕਰਦੇ ਹਨ ਜੋ reducers ਨੂੰ predictable ਅਤੇ testable ਬਣਾਉਂਦਾ ਹੈ।

Thunks async ਕਰਨ ਦਾ standard, approachable ਤਰੀਕਾ ਹਨ (data ਫੈਚ ਕਰਨਾ, loading/success/error actions dispatch ਕਰਨਾ)।

Middleware pipeline ਨੂੰ ਸਮਝਣਾ ਅਤੇ thunk pattern ਲਾਜ਼ਮੀ ਹੈ real Redux apps ਲਈ, ਕਿਉਂਕਿ ਲਗਭਗ ਸਭ ਨੂੰ data ਲੋਡ ਕਰਨਾ ਪੈਂਦਾ ਹੈ; RTK ਦਾ `createAsyncThunk` ਬਿਲਕੁਲ ਇਸ 'ਤੇ ਨਿਰਮਾਣ ਕਰਦਾ ਹੈ।