ngrx ofType, @ngrx/effects

Question

如果我在我的应用程序模块中声明，我会尝试了解 typeof 效果在 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方法，这个操作符从源 Observable 中获取值，将它们传递给一个predicate函数，并且只发出那些产生true值。

值得注意的是，您的每个效果都将一个 observable ( this.action$ ) 作为输入，并返回一个新的 observable，当效果初始化时，它只订阅一次。 返回的 observable 定义了来自输入 observable 的动作如何转换的方式，但它不会影响源 observable 本身。

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

您可能还想更熟悉rxjs 。 我建议您查看 André Staltz 的“您将学习 RxJS”的演讲，它应该能让您直观地了解什么是可观察量以及它们是如何工作的。

Answer 2

this.actions$ .ofType(CREATE_TASK) 将在每次你的 action 被调度时调用，在你的 reducer case 被执行之后。 像 Redcucer

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

第一个减速器将执行，然后它会查看是否生效，如果您有任何具有“CREATE_TASK”类型的效果。 在订阅模式中，您订阅的任何内容都将是回调函数，它将根据条件存储在引擎盖下的数组中。 当您根据条件分派动作时，所有函数都会调用满足条件的人。

Answer 3

关键是 ofType 没有在 ngrx/effects 内的 Actions 类中导出，因此您可以像下面这样使用它： 1- import ofType from ngrx/effects 这将是

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)))
      );
    })
  );
}

Answer 4

您还可以从每个效果中分派一系列动作。

从媒体阅读这篇文章