NGRX Effects 在错误时中断应用程序，如何处理错误？

Question

我在我的应用程序中使用 NGRX 效果。当它失败时，它似乎中断了流。

@Effect()
createUser$: Observable<Action> = _action$.ofType(fromUser.CREATE_NEW_USER_ACTION)
  .pipe(
    mergeMap((action: fromUser.CreateNewUserAction) =>
      this._tokenService.post('users', action.payload)
        .pipe(
          map(response => {
            this._router.navigate(
              ["dashboard", "users", "view"],
              { queryParams: { id: response.json().message.id } });
            return new fromUser.CreateNewUserCompleteAction(response.json().message);
          },
            catchError(error =>
              of(new fromUser.CreateNewUserFailedAction(error.json().message))
            )
          )
        )
    )
  );

从未触发错误操作，我尝试记录。

Answer 1

您的 tokenService 返回什么？它可能正在内部处理来自 API 调用的任何错误。只要您的 API 调用没有隐藏错误事件，CatchError 就应该可以工作。如果是这种情况，您可能需要使用 Observable.throw().

从该服务中抛出错误

为了便于阅读，我通常会更像这样格式化我的效果。

@Effect() updateUser$: Observable<Action>;

constructor(action$: Actions, tokenService: TokenService) {
this.updateUser$ = action$.ofType(fromUser.UPDATE_USER_ACTION)
.pipe(
    mergeMap((action: fromUser.UpdateUserAction) => 
        tokenService.patch(`users/${this.user.id}`, action.payload)
           .pipe(
              map(response => {
                 this._router.navigate(
                    ["dashboard", "users", "view"], 
                    { queryParams: { id: response.json().message.id } });
                 return new fromUser.UpdateUserCompleteAction(response.json().message); 
              },
              catchError(error => 
                 of(new fromUser.UpdateUserFailedAction(error.json().message))
              )
           )
        )
    )
);
}

这段代码看起来应该可以工作。查看您的 TokenService。

Answer 2

看起来您的 parentheses 没有正确放置在第二个 pipe 函数中。 map 和 catchError 应该在管道内平行。在您的代码中，catchError 函数位于 map 内。

@Effect()
createUser$: Observable<Action> = _action$.ofType(fromUser.CREATE_NEW_USER_ACTION)
  .pipe(
    mergeMap((action: fromUser.CreateNewUserAction) =>
      this._tokenService.post('users', action.payload)
        .pipe(
          map(response => {
            this._router.navigate(
              ["dashboard", "users", "view"],
              { queryParams: { id: response.json().message.id } });
            return new fromUser.CreateNewUserCompleteAction(response.json().message);
          }),
          catchError(error =>
            of(new fromUser.CreateNewUserFailedAction(error.json().message))
          )
        )
    )
  );

顺便说一句，这是一个好的实践，将 catchError 与 http 请求一起放置，而不是放在可能会停止的外部 pipe 流中action$ 可观察到的，NGRX 框架将不会收到任何未来的操作。

NGRX Effects 在错误时中断应用程序，如何处理错误？

NGRX Effects breaks app on error, how to handle errors?

angular

ngrx

ngrx-store

ngrx-effects