ngrx效应解释：@Effect

Question

我正在研究ngrx效果，我遇到了这样的代码：

@Effect()
  loadProjects$ = this.dataPersistence.fetch(ProjectsActionTypes.LoadProjects, {
    run: (action: LoadProjects, state: ProjectsState) => {
      return this.projectsService.all().pipe(map((res: Project[]) => new ProjectsLoaded(res)))
    },
    onError: (action: LoadProjects, error) => {
      console.error('Error', error);
    }
  });

这里的效果是侦听LoadProjects操作，当它被触发时，它执行一个http调用函数(this.projectsService.all())，并映射它以触发另一个操作，即ProjectsLoaded。

NB:上面的示例与预期的一样工作。

返回this.projectsService.all().pipe(map((res: Project[]) => new ProjectsLoaded(Res)

我不明白的是，它是如何触发ProjectsLoaded操作的，甚至不需要听http调用结果--这是一个可观察的、没有订阅() ?的结果。

如你所知，对于正常观察的人来说，这是行不通的

const obs = new Observable((sub) => {
  sub.next(10);
  sub.complete();
});

obs.pipe(map((v) => console.log(v))); // nothing happen because we did not subscribe to the observable 
obs.pipe(map((v) => v)).subscribe((v)=>console.log(v)); // it works

Answer 1

之所以会出现这种情况，是因为您提到的内部Observable与effect的主Observable链接在一起，NgRx在内部订阅它来收听action once dispatched。

因此，您可以想象它就像将两个Observables链接在一起一样，使用mergeMap，如下所示(从您的示例中)

const obs1 = new Observable((sub) => {
    sub.next(10);
    sub.complete();
});

const obs2 = new Observable((sub) => {
    sub.next(20);
    sub.complete();
});

obs1.pipe(
    map((v1) => console.log(v1)), // it works
    mergeMap(() => obs2.pipe(map((v2) => v2)))
).subscribe((v2) => console.log(v2)); // it works