ngrx ofType @ngrx/effects

Question

如果我在我的应用程序模块中声明，我试着理解ngrx中的类型效果是如何工作的：

....

@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一次执行！？

如果它调用了一次，那么当我发出动作时，效果如何知道每次女巫效果订阅/执行？

谢谢大家！

Answer 1

简而言之，当调用.ofType()时，它订阅操作的源流，并将匹配的操作推送到结果流。因此，它确实被称为一次。

如果我们看一下源代码，我们就会发现ofType使用rxjs库的filter操作符，这意味着this.action$.ofType(CREATE_TASK)可以扩展到

this.action$.filter(action => action.type === CREATE_TASK)

关于filter工作方式的说明可从rxjs 文档中找到

类似于众所周知的Array.prototype.filter方法，这个操作符从可观察的源获取值，通过一个predicate函数传递它们，并且只发出生成true的值。

值得注意的是，您的每个效果都以一个可观测(this.action$)作为输入，并返回一个新的可观测值，在初始化效果时只订阅一次。返回的可观测性定义了如何从输入可观察到的动作转换，但它不影响源可观测本身。

在您的示例中，ofType()方法返回一个新的可观测值，该方法“侦听”可观测的this.action$，并且只发出满足条件action.type === CREATE_TASK的操作。然后是map运算符，它还返回一个新的可观测值，它“侦听”ofType()调用返回的可观测值，并根据您传递的投影函数将接收到的每个动作转换为一个新值。但是，所有这些可观测值只在初始化时创建一次，当您分派操作时，它们只是“流”在可观测值中，然后被过滤和转换。

您还可能希望更熟悉rxjs。我建议你检查一下安德烈·斯塔尔茨( AndréStaltz )的“你将学习RxJS” talk，它应该给你一种直觉，让你知道什么是可观察的，它们是如何工作的。

Answer 2

this.actions$ .ofType(CREATE_TASK)每次执行还原机机箱后，都会调用您的操作。就像红黄瓜

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

第一个还原器将执行，然后它将检查生效，如果你有任何效果，谁有‘创建_任务’类型。在订阅模式中，无论您有什么订阅，都将是回调函数，它将存储在基于条件的遮罩下的数组中。当您根据所有函数都将调用满足条件的条件来调度操作时。

Answer 3

要点是，ofType不是在ngrx/effects中的Actions类中导出的，因此您可以像下面这样使用它: 1-从ngrx/ ofType导入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)))
      );
    })
  );
}