web-dev-qa-db-ja.com

ngrx ofType、@ ngrx / Effects

アプリモジュールで宣言した場合、ngrxの内部でtypeofエフェクトがどのように機能するかを理解しようとします。

....

@NgModule({
    imports: [
        EffectsModule.forRoot([TodosEffectsService])
],

....

そして私は確かにエフェクトファイルを書きます：

@Effect() createTodos$ = this.actions$
.ofType(CREATE_TASK)
    .map(() => {
        console.log('called');
            return { type: 'OTHER'};
});

@Effect() addTodos$ = this.actions$
.ofType(CREATE_TASK)
    .map(() => {
        console.log('called');
            return { type: 'OTHER'};
});

私は理解しようとしていますが、実行時にアクションをディスパッチしますthis.action $がサブスクライブされ、タイプに一致するようにofTypeを実行するたびに？またはofTypeを一度実行すると！？

一度呼び出された場合、アクションをディスパッチすると、魔女のエフェクトがサブスクライブ/実行するたびにエフェクトがどのように知るのですか？

みんなありがとう！

angulartypescriptngrxngrx-effects
8
Alin

簡単に言うと、.ofType()が呼び出されると、アクションのソースストリームにサブスクライブし、一致するアクションを結果のストリームにプッシュします。だからそれは確かに一度呼ばれます。

ソースコード を見ると、内部でofTypeがfilterライブラリのrxjs演算子を使用していることがわかります。つまり、this.action$.ofType(CREATE_TASK)は次のように展開できます

_this.action$.filter(action => action.type === CREATE_TASK)
_

filterがどのように機能するかの説明は、rxjsdocs から見つけることができます。

よく知られている_Array.prototype.filter_メソッドと同様に、この演算子はソースObservableから値を取得し、それらをpredicate関数に渡し、trueを生成した値のみを出力します。

各エフェクトは、オブザーバブル（_this.action$_）を入力として受け取り、エフェクトが初期化されるときに1回だけサブスクライブされる新しいオブザーバブルを返すことに注意してください。返されたオブザーバブルは、入力オブザーバブルからのアクションがどのように変換されるかを定義しますが、ソースオブザーバブル自体には影響しません。

あなたの例では、ofType()メソッドは_this.action$_ observableを「リッスン」する新しいobservableを返し、条件_action.type === CREATE_TASK_を満たすアクションのみを発行します。次に、map演算子を実行します。また、ofType()呼び出しによって返されたオブザーバブルを「リッスン」する新しいオブザーバブルを返し、受け取った各アクションを射影関数に従って新しい値に変換します。パス。ただし、これらのオブザーバブルはすべて、初期化時に1回だけ作成され、アクションをディスパッチすると、オブザーバブルを「フロー」し、フィルター処理されて変換されます。

また、rxjsについて詳しく知ることもできます。チェックすることをお勧めします "RxJSを学びます" AndréStaltzによる話、それはあなたに観測量が何であるか、そしてそれらがどのように機能するかについての直感を与えるはずです。

16
Sergey Karavaev

重要なのは、ofTypeはngrx/Effects内のActionsクラスにエクスポートされないため、次のように使用できるということです。1-ngrx/effectsからofTypeをインポートします。

import { Injectable } from "@angular/core";

import { Effect, Actions, ofType } from "@ngrx/effects";
import * as omid from "@ngrx/effects";
import { of } from "rxjs";
import { map, switchMap, catchError } from "rxjs/operators";
@Injectable()
export class PizzasEffects {
  constructor(
    private actions$: Actions,
    private pizzaService: frtomServices.PizzasService
  ) {}

  @Effect()
  LoadPizzas$ = this.actions$.pipe(
    ofType(pizzaActions.LOAD_PIZZAS),
    switchMap(() => {
      return this.pizzaService.getPizzas().pipe(
        map(pizzas => new pizzaActions.LoadPizzasSuccess(pizzas)),
        catchError(error => of(new pizzaActions.LoadPizzasFail(error)))
      );
    })
  );
}
2
shahrum hosseinabadi

this.actions $ .ofType（CREATE_TASK）は、レデューサーケースが実行された後、アクションがディスパッチされるたびに呼び出されます。 Redcucerのように

switch(action) {
case youractionsname.CREATE_TASK : {
// pure function logic here
   }
}

タイプが「CREATE_TASK」のエフェクトがある場合は、最初にレデューサーが実行され、次にエフェクトが調べられます。サブスクリプションパターンでは、サブスクライブしているものはすべてコールバック関数になり、条件に基づいて内部で配列に格納されます。すべての関数が条件を満たす条件に基づいてアクションをディスパッチする場合。

2
viveksharma