ما هي الـ actions والـ reducers، ولماذا يجب أن تكون الـ reducers نقية؟

Question

Accepted Answer

**action** هو كائن عادي يصف *ما حدث*؛ و **reducer** هي دالة نقية تأخذ الحالة الحالية وعملية وتعيد *الحالة التالية*. معاً، يطبقان انتقالات حالة يمكن التنبؤ بها.

## الـ Actions — وصف الأحداث

```js
// just data: a `type` (required) + any payload
{ type: "todos/added", payload: { id: 1, text: "Learn Redux" } }
{ type: "todos/toggled", payload: 1 }
```

الـ actions لا *تفعل* أي شيء — هي أوصاف إعلانية للأحداث. تسميتها بصيغة الماضي ("أضيف"، "بدّل") يعكس أنها تسجل ما حدث.

## الـ Reducers — حساب الحالة التالية

```js
function todosReducer(state = [], action) {
  switch (action.type) {
    case "todos/added":
      return [...state, action.payload];              // new array
    case "todos/toggled":
      return state.map(t =>                             // new array, new object for the changed one
        t.id === action.payload ? { ...t, done: !t.done } : t
      );
    default:
      return state;                                     // unknown action → unchanged
  }
}
```

توقيع الـ reducer هو `(state, action) => newState`. يجب أن تعيد كائن/مصفوفة حالة **جديدة** (بشكل غير قابل للتغيير)، ولا تطبق أبداً على المدخلات.

## لماذا يجب أن تكون الـ reducers نقية

الدالة النقية: (1) تعيد نفس المخرجات للمدخلات نفسها، و(2) **بدون آثار جانبية**. يجب أن تتبع الـ reducers كلا القاعدتين:

```js
// ❌ NOT pure — breaks everything
function badReducer(state, action) {
  state.value++;              // ❌ mutates input (breaks change detection, time-travel)
  fetch("/api/log");          // ❌ side effect (non-deterministic, untestable)
  return { value: Math.random() }; // ❌ non-deterministic output
}
```

النقاء يمكّن ميزات Redux الخاصة:

```text
✓ Predictability   — same state + action ALWAYS gives the same result
✓ Time-travel / replay — you can re-run actions to reproduce any state
✓ Testability      — just call reducer(state, action) and assert; no mocks needed
✓ Change detection — returning new references lets the UI detect changes
```

الآثار الجانبية (استدعاءات API، تسجيل، عشوائية) تنتمي إلى **middleware** (thunks/sagas) أو effects — ليس أبداً في الـ reducers.

## لماذا يهم

نموذج action/reducer هو قلب إدارة الحالة على طراز Redux والسبب في أنه يمكن تصحيحه واختباره بسهولة.

متطلب النقاء ليس تعسفياً: إنه *ما يجعل* تصحيح الأخطاء بالعودة في الزمن وإعادة تشغيل العمليات واختبار الوحدة البسيط ممكناً، وهذا هو السبب في أن الآثار الجانبية يجب أن تعيش في مكان آخر.

هذا النمط الذي يحركه الدالة النقية والتحديث غير القابل للتغيير يتكرر عبر Redux و NgRx و useReducer وما بعده — فهم هذا (والانضباط في الحفاظ على نقاء الـ reducers) أساسي للحالة التي يمكن التنبؤ بها.