أساسيات NgRx Store

يقدّم لكم هذا الدرس NgRx، وهو حل قوي لإدارة الحالة في تطبيقات Angular.

ما هو NgRx؟

استُلهم NgRx من Redux، ويساعد على إدارة الحالة مركزيًا في تطبيقات Angular، مما يبسّط معالجة البيانات بين المكوّنات.

لماذا نستخدم NgRx؟

• إدارة مركزية للحالة
• تدفّق واضح ومتوقّع للبيانات
• تصحيح الأخطاء واختبارها بسهولة أكبر

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

يتضمن NgRx مفاهيم أساسية:

• Store: يحتفظ بحالة التطبيق
• Actions: تصف الأحداث
• Reducers: تتولى انتقالات الحالة
• Selectors: تسترجع بيانات الحالة

تثبيت NgRx Store

ثبّتوا NgRx باستخدام npm:

npm install @ngrx/store --save

إنشاء Store

عرّفوا Store في وحدة التطبيق لديكم:

StoreModule.forRoot({ appState: appReducer })

إنشاء Actions

تعرّف Actions الأحداث في تطبيقكم:

export const loadData = createAction('[App] Load Data');

Reducers

تتولى Reducers تغييرات الحالة من خلال الاستجابة إلى Actions وإنتاج حالة جديدة:

export const appReducer = createReducer(
  initialState,
  on(loadData, state => ({ ...state, loading: true }))
);

الملخص

لقد تعلمتم أساسيات استخدام NgRx Store لإدارة حالة تطبيقكم بفعالية. أحسنتم!