ما هي middleware في Redux وكيف تعمل thunks؟

Question

Accepted Answer

**Middleware** تقع بين إرسال action وبين وصول action إلى reducer، مما يسمح لك باعتراض actions للتعامل مع **side effects** (استدعاءات API غير متزامنة، تسجيل) — وهو ما لا يمكن للـ reducers أن تفعله لأنه يجب أن تبقى نقية. **Thunks** هي middleware الأكثر شيوعاً، وتمكّن من المنطق غير المتزامن.

## حيث تناسب middleware

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

Middleware تغطي `dispatch`، لذا كل 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
}
```

تحتاج إلى مكان للقيام بعمل غير متزامن (fetch) ثم إرسال النتيجة. Thunk middleware تسمح بإرسال **function** بدلاً من كائن عادي.

## 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 تؤدي العمل غير المتزامن وترسل plain actions (`loading`/`loaded`/`error`) في كل مرحلة — مما يحافظ على نقاء reducers بينما يعيش 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** — مع الحفاظ على النقاء الذي يجعل reducers قابلة للتنبؤ واختبار.

Thunks هي الطريقة القياسية والمفهومة للقيام بعمل غير متزامن (جلب البيانات، إرسال loading/success/error actions).

فهم pipeline middleware وأنماط thunk ضروري للتطبيقات Redux الحقيقية، حيث أن تقريباً جميعها تحتاج إلى تحميل بيانات؛ `createAsyncThunk` من RTK يبني على هذا بالضبط.