@ngrx/effects API 请求处理

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 操作已正确发送到商店，但效果并未启动。

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

@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)),
  ),
);

但幸运的是，(IMO) 毫无意义的更改修复了一切。登录尝试失败后，效果突然成功启动。有人可以向我解释发生了什么吗？

Answer 1

当 catch（或者，在 RxJS 版本 6 中，catchError）运算符捕获到错误时，组合的 observable 会继续 不同的 可观察到。

这意味着当发生错误时，您的效果将继续使用 catch 中返回的 of(new authActions.LoginFailure(error)) 可观察对象。

继续该 observable 将看到 LoginFailure 动作被调度，但在那之后，observable 完成。这意味着效果完成，然后自动取消订阅其订阅者。因此效果停止调度进一步的动作。

这在 Paul Lessing 的文章 Handling Errors in NgRx Effects and there is a TSLint rule - rxjs-no-unsafe-catch - to detect this particular problem in my rxjs-tslint-rules 包中有更详细的讨论。

@ngrx/effects API 请求处理

@ngrx/effects API request handling

rxjs

redux

reactivex

ngrx

angular