Actions وReducers

تعرّفوا إلى إدارة الحالة في تطبيقات NgRx باستخدام Actions وReducers.

ما هي Actions؟

تصف Actions الأحداث أو العمليات الفريدة في تطبيقكم، مثل تحميل البيانات أو تفاعلات المستخدم.

إنشاء Actions

أنشئوا Actions باستخدام createAction():

export const login = createAction('[Login Page] Login');

حمولات Actions

مرّروا البيانات مع Actions باستخدام payload:

export const loadUser = createAction('[User] Load', props<{ userId: number }>());

Reducers

تتولى Reducers انتقالات الحالة استنادًا إلى Actions. وهي تُعيد حالات جديدة دون تعديل الحالة الحالية مباشرةً.

إنشاء Reducers

استخدموا createReducer لتعريف كيفية تغيّر الحالة:

export const userReducer = createReducer(
  initialState,
  on(loadUser, (state, action) => ({ ...state, user: action.userId }))

تحديث الحالة

يجب أن تُعيد Reducers دائمًا كائنات حالة جديدة. لا تعدّلوا الحالة الحالية مباشرةً مطلقًا.

on(loadUser, (state, action) => ({ ...state, user: action.userId }))

دمج Reducers

ادمجوا عدة Reducers في reducer جذري واحد لإدارة الحالات المعقدة:

StoreModule.forRoot({ users: userReducer, posts: postReducer })

الملخص

لقد تعلمتم إنشاء Actions وReducers لإدارة الحالة بفعالية في Angular باستخدام NgRx!