Selectors وEffects في NgRx

يتناول هذا الدرس Selectors وEffects، وهما جزءان أساسيان من NgRx لإدارة الحالة بكفاءة في Angular.

ما هي Selectors؟

تتيح لكم Selectors استرجاع أجزاء محددة من الحالة بكفاءة من Store، مما يحسّن الوصول إلى البيانات.

إنشاء Selectors

أنشئوا Selectors باستخدام الدالة createSelector() لاختيار البيانات من الحالة بكفاءة:

export const selectUser = createSelector(
  (state: AppState) => state.user,
  (user) => user.details
);

استخدام Selectors في المكوّنات

تساعدكم Selectors على الوصول بسهولة إلى بيانات Store من داخل المكوّنات:

this.store.select(selectUser).subscribe(user => console.log(user));

ما هي Effects؟

تتعامل Effects مع الآثار الجانبية في NgRx، مثل طلبات HTTP، من خلال الاستماع إلى Actions وتنفيذ العمليات غير المتزامنة.

تثبيت Effects

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

npm install @ngrx/effects --save

إنشاء Effects

تتعامل Effects مع الآثار الجانبية، مثل طلبات HTTP التي تُشغّلها Actions:

loadUser$ = createEffect(() =>
  this.actions$.pipe(
    ofType(loadUser),
    mergeMap(() => this.userService.getUser().pipe(
      map(user => loadUserSuccess({ user }))
    ))
  )
);

تسجيل Effects

سجّلوا Effects في وحدتكم لتمكينها في تطبيقكم:

EffectsModule.forRoot([UserEffects])

الملخص

أصبحتم الآن تفهمون Selectors وEffects في NgRx، مما يمكّنكم من التعامل مع الحالة والآثار الجانبية بكفاءة. عمل ممتاز!