NgRxのSelectorsとEffects

このレッスンでは、Angularで効率的に状態を管理するために重要なNgRxのSelectorsとEffectsについて学びます。

Selectorsとは

Selectorsを使用すると、Storeから状態の特定の部分を効率的に取得でき、データアクセスを最適化できます。

Selectorsの作成

createSelector()関数を使用してSelectorsを作成し、状態からデータを効率的に選択します。

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は、Actionsを監視して非同期処理を実行することで、HTTPリクエストなどの副作用を処理します。

Effectsのインストール

NgRx Effectsを次のようにインストールします。

npm install @ngrx/effects --save

Effectsの作成

Effectsは、Actionsによって開始されるHTTPリクエストなどの副作用を処理します。

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

Effectsの登録

アプリケーションでEffectsを有効にするために、モジュールに登録します。

EffectsModule.forRoot([UserEffects])

まとめ

NgRxのSelectorsとEffectsを理解し、状態と副作用を効率的に扱えるようになりました。すばらしい成果です。