Menene middleware a cikin Redux kuma thunks suna aiki ta yaya?

Question

Accepted Answer

**Middleware** tana zaune a tsakanin dispatch na action da action da ke isa ga reducer, na bada ku daidaitawa da gidaje a gida don shawo kan **side effects** (asynchronous API calls, logging) — yana da wanda reducers ba zasu iya yi saboda dole ne su ci tsaye. **Thunks** shine mafi yawan middleware, na bada damar asynchronous logic.

## Inda middleware ya dakʻida

```text
dispatch(action) → [ middleware 1 → middleware 2 → ... ] → reducer → store
                     (can inspect, modify, delay, or stop actions; do side effects)
```

Middleware yana nannade `dispatch`, saboda haka kowane action yana wucewa a cikinsa kafin ya isa ga reducers. Wannan shine inda aka shirya ga side effects waɗanda reducers sukan yi.

## Matsala da thunks ke warware

```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
}
```

Kana buƙatar wuri don aikin asynchronous (fetch) sannan dispatch sakamakon. Thunk middleware na bada damar dispatch **function** maimakon taushi mai tsawo.

## Thunk — aiki wanda ke karba 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 yana aikin asynchronous kuma yana dispatch ayyukan tsofua (`loading`/`loaded`/`error`) a kowane matakin — ana kiyaye reducers da tsayi yayin da side effect ke zaune a thunk.

## Sauran middleware aiki & zaɓuwa

```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)
```

## Me ya sa haka mahimmanci

Middleware ita ce yadda Redux ta warware dukan abin da reducers ba za su iya — musamman **asynchronous side effects** — yayin sa daidaitawa gida da ke sa reducers ta zama kin tsani da testable.

Thunks ne hanyar daidaituwa, wajen don aikin asynchronous (shigo da bayanai, dispatch loading/success/error ayyuka).

Ganin pipeline middleware da thunk pattern ita ce mahimmanci ga ainihin Redux apps, domin kusan dukkan su na buƙatar charge bayanai; RTK na `createAsyncThunk` yana gina a tsaye a jiya.