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: {} }