Redux मा middleware के हो र thunks कसरी काम गर्छन्?

Question

Accepted Answer

**Middleware** एक action dispatch गर्दा र action reducer मा पुग्दा बीचमा बस्छ, जसले तपाईंलाई actions को intercept गर्न दिन्छ ताकि तपाईं **side effects** (async API calls, logging) सम्हाल्न सकून् — जो 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 मा पुग्नु अगाडि। यो 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 ले एक सादा object को सट्टा एक **function** dispatch गर्न दिन्छ।

## एक 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 उपयोग र विकल्प

```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 को संरक्षण गर्छ जसले reducers लाई predictable र testable बनाउँछ।

Thunks async गर्नको लागि मानक, सहज तरिका हुन् (डेटा fetch गर्न, loading/success/error actions dispatch गर्न)।

Middleware pipeline र thunk pattern बुझ्न वास्तविक Redux apps को लागि आवश्यक हो, किनकि लगभग सबैलाई डेटा लोड गर्न आवश्यक हुन्छ; RTK को `createAsyncThunk` बिल्कुल यसै मा आधारित छ।