Селекторы и эффекты в NgRx

В этом уроке рассматриваются селекторы и эффекты — важные части NgRx для эффективного управления состоянием в Angular.

Что такое селекторы

Селекторы позволяют эффективно извлекать из хранилища отдельные части состояния, оптимизируя доступ к данным.

Создание селекторов

Создавайте селекторы с помощью функции createSelector(), чтобы эффективно выбирать данные из состояния:

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

Использование селекторов в компонентах

Селекторы помогают легко получать данные хранилища внутри компонентов:

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

Что такое эффекты

Эффекты обрабатывают побочные эффекты в NgRx, например HTTP-запросы, отслеживая действия и выполняя асинхронные операции.

Установка эффектов

Установите эффекты NgRx с помощью:

npm install @ngrx/effects --save

Создание эффектов

Эффекты обрабатывают побочные эффекты, например HTTP-запросы, вызванные действиями:

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

Регистрация эффектов

Зарегистрируйте эффекты в модуле, чтобы включить их в приложении:

EffectsModule.forRoot([UserEffects])

Итоги

Теперь вы понимаете, как работают селекторы и эффекты в NgRx, и сможете эффективно управлять состоянием и побочными эффектами. Отличная работа!