ngrxOnRunEffectsとは?Effectsの開始と停止を制御するメソッドです!

この記事では『ngrxOnRunEffects』について

  • ngrxOnRunEffectsとは
  • ngrxOnRunEffectsのプログラム例

などを図を用いて分かりやすく説明するように心掛けています。ご参考になれば幸いです。

ngrxOnRunEffectsとは

ngrxOnRunEffectsはAngularの状態管理ライブラリであるNgRxの一部であり、Effectsのライフサイクル(開始と停止)を制御することができるメソッドです。

ngrxOnRunEffectsは以下に示すように、OnRunEffectsインターフェースのメソッドになります。

interface OnRunEffects {
    ngrxOnRunEffects(resolvedEffects$: Observable<EffectNotification>): Observable<EffectNotification>
}

ngrxOnRunEffectsの構文は以下のようになっています。

ngrxOnRunEffectsの構文

ngrxOnRunEffects(resolvedEffects$: Observable<EffectNotification>): Observable<EffectNotification>
  • 引数:resolvedEffects$<EffectNotification>
  • 返り値:Observable<EffectNotification>

ngrxOnRunEffectsのプログラム例

以下にngrxOnRunEffectsを用いたプログラムの一例を示します。

export class UserEffects implements OnRunEffects {
    constructor(private actions$: Actions) { }

    ngrxOnRunEffects(resolvedEffects$: Observable<EffectNotification>) {
        return this.actions$.pipe(
            ofType('LOGIN'),
            exhaustMap(() =>
                resolvedEffects$.pipe(
                    takeUntil(this.actions$.pipe(ofType('LOGOUT')))
                )
            )
        );
    }
}

上記のプログラムでは、「LOGINアクション」がディスパッチされると、UserEffectsが開始され、「LOGOUTアクション」がディスパッチされると、UserEffectsが停止します。すなわち、「LOGOUTアクション」がディスパッチされるまで、UserEffectsは実行され続けます。

ngrxOnRunEffectsを用いることで、Effectsを一時停止したり、再開したりなど、Effectsの動作を細かく制御することができます。例えば、ユーザーがログインしていない時には、特定のエフェクト(例えば、APIを呼び出して、データを取得するなど)を実行しないように制御し、ユーザーがログアウトした時には、すべてのEffectsを停止したりすることができます。

ここで、resolvedEffects$オブザーバブルは、UserEffectsクラスのEffectsが解決するたびに通知を送るオブザーバブルです。このresolvedEffects$オブザーバブルはngrxOnRunEffectsメソッドに渡され、エフェクトのライフサイクル(開始と停止)を制御するために使用されます。

本記事のまとめ

この記事では『ngrxOnRunEffects』について、以下の内容を説明しました。

  • ngrxOnRunEffectsとは
  • ngrxOnRunEffectsのプログラム例

お読み頂きありがとうございました。