Angular NgRx (State Management)
الـ NgRx في Angular مش مجرد “إدارة حالة” (State Management)...
هو أسلوب لتنظيم تدفق البيانات داخل التطبيقات الكبيرة
في الفيديو ده شرح NgRx بشكل عملي ومفهومي مش مجرد تعريفات نظرية.
هنتكلم عن:
✅ Actions
ليه الـ Actions تعتبر زي “أحداث” أو “نوايا المستخدم” داخل التطبيق
أمثلة: “إضافة منتج”، “تحميل المستخدمين”، “تسجيل الدخول بنجاح”
✅ Store
اعتبره مخزن مركزي/عام للـ State بدل ما البيانات تكون متفرقة بين الـ Components
✅ Reducers
دوال نقية (Pure Functions) تستقبل:
Current State + Action → New State
وكمان هنعرف ليه الـ Immutability مهمة، وإزاي التحديثات المتوقعة للـ State بتسهل عملية الـ Debugging
✅ Selectors
الـ Selectors عبارة عن دوال للاستعلام عن البيانات من الـ Store
بدل ما تكتب:
store.state.products.filtered.active...
بتنشئ Selectors قابلة لإعادة الاستخدام:
selectProducts
selectCartItems
selectCurrentUser
أنظف + أسرع + Memoized
✅ Effects
الـ Reducers لازم تفضل Pure.
طيب فين نحط استدعاءات الـ API؟
هنا ييجي دور الـ Effects في التعامل مع الـ Side Effects:
طلبات HTTP
التنقل بين الصفحات
الـ Logging
العمليات غير المتزامنة (Async)
✅ NgRx Entity
إدارة الـ Arrays يدويًا بتكون مرهقة جدًا في التطبيقات الكبيرة.
NgRx Entity بيحوّل البيانات لشكل منظم:
{
ids: [],
entities: {}
}