@ngrx/effects请求处理

Question

我遇到的情况是，我的登录表单在一次失败登录尝试之后停止工作，因为我一直在使用effect请求，而在更改之前，它就是这样看的：

@Effect()
login$ = this.actions$.ofType<authActions.Login>(
  authActions.LOGIN,
).switchMap(
  ({ payload: data }) => this.client.login(data),
).map(
  ({ token }) => new authActions.LoginSuccess(token),
).catch(
  (error) => of(new authActions.LoginFailure(error)),
);

具体而言，当用户试图在失败尝试后登录时，Login操作被正确地分派到商店，但效果却没有启动。

我拼命地想要修复那个bug，然后我做了一个我认为毫无意义的改变：

@Effect()
login$ = this.actions$.ofType<authActions.Login>(
  authActions.LOGIN,
).switchMap(
  ({ payload: data }) => this.client.login(data).map(
    ({ token }) => new authActions.LoginSuccess(token),
  ).catch(
    (error) => of(new authActions.LoginFailure(error)),
  ),
);

但幸运的是，(国际海事组织)毫无意义的改变解决了一切。突然，在尝试登录失败后，该效果成功启动。有人能解释一下发生了什么吗？

Answer 1

当一个错误被catch (或者，在RxJS版本6中，catchError)操作符捕获时，组合的可观测性将以不同的可观测性继续进行。

这意味着，当发生错误时，您的效果将继续下去，of(new authActions.LoginFailure(error))将在catch中返回。

继续进行可观察的操作将看到LoginFailure动作被分派，但在此之后，可观察的操作就完成了。这意味着效果完成，然后它的订阅者将自动取消订阅。因此，这种效果停止了进一步的行动。

保罗·莱辛的文章“NgRx效应中的错误处理”将对此进行更详细的讨论，并有一个TSLint规则-- rxjs-no-unsafe-catch --以检测我的rxjs-tslint-rules包中的这个特定问题。