كيف يعمل إدارة الحالة مع NgRx؟

Question

Accepted Answer

**NgRx** هي مكتبة إدارة حالة مستوحاة من Redux لـ Angular. تقوم بتركيز حالة التطبيق في **store** واحد غير قابل للتغيير، مع تدفق بيانات أحادي الاتجاه صارم وقابل للتنبؤ به مبني على RxJS. ## القطع الأساسية والتدفق ```text Component dispatches an ACTION → REDUCER produces new state (pure function) → STORE updates → SELECTORS read state → Component re-renders (EFFECTS handle side effects like HTTP, dispatching new actions) ``` ## الإجراءات — تصف ما حدث ```ts import { createAction, props } from "@ngrx/store"; export const loadUsers = createAction("[Users] Load"); export const loadUsersSuccess = createAction("[Users] Load Success", props<{ users: User[] }>()); ``` ## المُختزِل — دالة نقية تحسب الحالة التالية ```ts import { createReducer, on } from "@ngrx/store"; export const usersReducer = createReducer( initialState, on(loadUsers, state => ({ ...state, loading: true })), on(loadUsersSuccess, (state, { users }) => ({ ...state, users, loading: false })), ); ``` المختزلات **نقية** — إذا أعطيت الحالة الحالية والإجراء، فإنها تُرجع كائن حالة جديد تماماً (بشكل غير قابل للتغيير)، ولا تغير الكائن القديم. ## التأثيرات — التعامل مع الآثار الجانبية (HTTP، إلخ) ```ts loadUsers$ = createEffect(() => this.actions$.pipe( ofType(loadUsers), switchMap(() => this.api.getUsers().pipe( map(users => loadUsersSuccess({ users })) // dispatch success with the data ) ) ) ); ``` تستمع التأثيرات للإجراءات، وتؤدي عملاً غير متزامن (مثل HTTP)، وتُرسل إجراءات النتائج — مما يبقي الآثار الجانبية خارج المكونات والمختزلات. ## المحددات + استخدام المكون ```ts export const selectUsers = createSelector(selectUsersState, s => s.users); // memoized // component users$ = this.store.select(selectUsers); load() { this.store.dispatch(loadUsers()); } ``` ```html

``` ## متى تستحق NgRx الاستخدام؟ ```text ✓ Large apps with lots of shared state across many components ✓ Complex state interactions, need for time-travel debugging / strict predictability ✗ Small/medium apps → it's heavy boilerplate; a service + signals/BehaviorSubject is simpler ``` (ملاحظة: NgRx توفر أيضاً **SignalStore** و**ComponentStore** أخف وزناً مع كود نماذج أقل.) ## لماذا يعتبر هذا مهماً تجلب NgRx إدارة الحالة المركزية والقابلة للتنبؤ بها وأحادية الاتجاه من Redux إلى Angular — وهي قيّمة للتطبيقات الكبيرة حيث تشارك العديد من المكونات حالة معقدة، وحيث يكون التتبع والتصحيح الصارم مهماً. لكنها تأتي مع كود نماذج كبير، لذا فإن الحكم الأساسي هو *متى* تستخدمها (حالة مشتركة كبيرة/معقدة) مقابل النهج الأبسط (الخدمات ذات الإشارات أو `BehaviorSubject`) للتطبيقات الأصغر. فهم تدفق الإجراء→المختزل→المتجر→المحدد والتأثيرات للآثار الجانبية هو جوهر العمل في قواعد بيانات NgRx.