带有switchMap和catchError的NgRx效果-有人可以解释我的代码与“正确”代码之间可观察到的工作流之间的区别吗?

时间:2019-11-14 10:33:34

标签: angular rxjs ngrx ngrx-effects switchmap

我发送了以下代码片段以供代码检查。这种效果需要在请求调用之后分派成功操作,或者如果服务方法抛出错误,则分派错误操作,这很正常。

@Effect()
  fetchData$ = this.actions$.pipe(
      ofType(ActionTypes.FetchData),
      switchMap(() => {
        return this.dataService.fetchData().pipe(
            map((data: IData): StoreAction<IData> =>
                new FetchDataSuccess(data)),
            catchError((error) => of(addErrorValue(error, ErrorCode.FETCH_DATA)))
      )};
  ));

但是,外部开发人员给了我评论(我没有联系,因此无法要求澄清)。他指示我用另一个switchMap包装我的switchMap(如下面的代码),因为上面代码中第一个switchMap内的catch错误“将导致效果中断”。

@Effect()
  fetchData$ = this.actions$.pipe(
      switchMap((a: StoreAction<IType>) => of(a).pipe(
          ofType(ActionTypes.FetchData),
          switchMap(() => {
            return this.dataService.fetchData().pipe(
                map((data: IData): StoreAction<IData> =>
                    new FetchDataSuccess(data)),
            );
          }),
          catchError((error) => of(addErrorValue(error, ErrorCode.FETCH_DATA)))
      ))
  );

现在,我继续阅读捕获效果中的错误,我的理解是catchErrors需要包装在switchMap中,因为这样,效果将不会中断,因为失败的内部(而不是外部)可观察的对象将被替换为一个成功的对象,并且可以将可观察到的效果最终强制为成功状态(如果我正确理解的话)。

我不了解和缺少的是:为什么我们将switchMap包装到另一个switchMap中?有人可以在第一种情况下与第二种情况下解释这种特殊可观察的工作流程吗?

1 个答案:

答案 0 :(得分:0)

那是无效的,第一个代码段(您如何编写效果)是正确的。

内部可观察值(catchError)上有一个this.dataService.fetchData,就足够了。如果此处发生错误,则由catchError处理,并且效果将分派动作addErrorValue(error, ErrorCode.FETCH_DATA)

您可以在NgRx example app

中看到相同的模式

有关更多信息,请参见https://blog.strongbrew.io/safe-http-calls-with-rxjs/https://medium.com/city-pantry/handling-errors-in-ngrx-effects-a95d918490d9