@ngrx/effects登录请求异常：失败后无法触发效果的原因解析

这问题我之前也碰到过！核心原因是RxJS里catch操作符的位置直接影响了NgRx 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)));

这里的catch是挂在整个Effect的主Observable流上的。当登录请求失败时，错误会冒泡到主流的catch里，它会返回一个发射LoginFailure动作的Observable。但根据RxJS的规则，catch处理完错误后，原来的主流（也就是这个login$ Effect）会被直接终止——因为catch返回的是一个只发射一次值就完成的Observable，主流跟着就结束了。

这就导致后续再派发Login动作时，这个已经“死掉”的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)))
  );

这次你把catch移到了switchMap内部的子Observable流里。也就是说，每次触发Login动作时，switchMap都会新建一个独立的登录请求子流：

• 如果登录成功，子流发射LoginSuccess后结束；
• 如果登录失败，子流内部的catch会捕获错误，发射LoginFailure后结束。

关键在于：子流的终止不会影响外层的Effect主流——主流仍然在持续监听Login动作，下次再派发时，switchMap会再新建一个子流处理请求，自然就能正常响应了。

总结一下NgRx Effects的错误处理原则 #

Effects本质是长期运行的Observable，绝对不能让主流因为错误而终止。所以处理请求错误时，一定要把catch（或者现在RxJS里的catchError）放在每个请求的子流内部，而不是挂在主流上。

内容的提问来源于stack exchange，提问作者roomcayz