72. مقدمة في إدارة الحالة

مع نمو التطبيقات، تصبح إدارة البيانات المشتركة (الحالة) معقدة. عندما يتم تمرير البيانات عبر العديد من المكونات عبر @Input/@Output أو الخدمات غير المهيكلة بشكل جيد، يصبح من الصعب تتبع التغييرات، مما يؤدي إلى 'كابوس تدفق البيانات'.

ما هي حالة التطبيق؟

الحالة هي البيانات التي تستمر وتتغير بمرور الوقت، مما يؤثر على واجهة المستخدم. أمثلة:

حالة مصادقة المستخدم.
البيانات التي تم جلبها من الخادم (مثل قائمة المنتجات).
حالة واجهة المستخدم (على سبيل المثال، علامة التبويب المحددة، رؤية النافذة المشروطة).

الحاجة إلى مخزن مركزي (Centralized Store)

توفر مكتبات إدارة الحالة المركزية (مثل NgRx و NgXs و Akita) نمطاً يمكن التنبؤ به (غالباً ما يكون مستوحى من Redux) لإدارة الحالة:

مصدر واحد للحقيقة (Single Source of Truth): تقيم جميع حالات التطبيق في كائن عالمي واحد (المخزن - Store).
الحالة للقراءة فقط (State is Read-Only): لا يمكن تغيير الحالة إلا عن طريق إطلاق إجراءات صريحة (Actions).
التغييرات يمكن التنبؤ بها (Changes are Predictable): يتم التعامل مع التغييرات بواسطة المُختزِلات (Reducers) (دوال نقية) التي تأخذ الحالة الحالية وإجراءً، وتُرجع كائناً جديداً للحالة.

NgRx (إدارة الحالة التفاعلية)

NgRx هي مكتبة Angular القياسية والشاملة لإدارة الحالة على غرار Redux، وتعتمد بشكل كبير على RxJS Observables.

مفاهيم NgRx الأساسية:

Store: يحتفظ بالحالة ككائن واحد وثابت.
Actions: الأحداث التي تُطلقها المكونات (على سبيل المثال، [Products Page] Load Products).
Reducers: تتعامل مع الإجراءات وتحسب الحالة الجديدة.
Selectors: دوال نقية للاستعلام عن شرائح الحالة وتكوينها.
Effects: خدمات تتعامل مع الآثار الجانبية (على سبيل المثال، استدعاءات API) التي يتم تشغيلها بواسطة الإجراءات.

بينما يُعد NgRx متقدماً، فإن فهم هذه البنية أمر ضروري لتطوير Angular على مستوى 'البطل' والحفاظ على التطبيقات الكبيرة.