Ngrx Effect调用NodeJS后端路由后触发动作失败求助

我一眼就瞅出你代码里的问题了——在map操作符里返回Observable.of({ type: AuthActions.SUCCESSFUL_SIGNUP })，这会让你的Effect输出变成Observable<Observable<Action>>，而Ngrx的Effect只认Observable<Action>或者单个Action对象，这就是动作无法被识别、报错的核心原因。

修正后的代码 #

@Effect() 
authSignup = this.actions$
  .ofType(AuthActions.TRY_SIGNUP)
  .switchMap((action: AuthActions.TrySignup) => {
    return this.httpClient.post('nodejs_backend_route')
      // 直接返回Action对象，不用套Observable.of
      .map((response: any) => {
        return { type: AuthActions.SUCCESSFUL_SIGNUP };
      })
      // 一定要加错误处理，不然请求失败后整个Effect会挂掉
      .catch(error => {
        return Observable.of({ type: AuthActions.SIGNUP_FAILED, payload: error });
      });
  });

关键问题拆解 #

• 操作符误用：httpClient.post本身返回的是Observable<Response>，你在map里嵌套返回Observable.of(...)，会把流变成嵌套的Observable结构，Ngrx根本没法解析这种嵌套流，自然识别不到你的SUCCESSFUL_SIGNUP动作。
• 正确返回值要求：在map里直接返回Action对象就行，map会把每个请求响应转换成对应的Action，最终整个switchMap返回的就是符合要求的Observable<Action>。
• 错误处理不可少：加上catch操作符处理HTTP请求错误，否则一旦请求失败，这个Effect就会被终止，后续所有的TRY_SIGNUP动作都不会再被处理。

另外，如果你的Ngrx版本是v8及以上，更推荐用createEffectAPI来写Effect，语法更清爽，还能借助TypeScript做类型检查，避免手动写Action时的拼写错误：

authSignup = createEffect(() => 
  this.actions$.pipe(
    ofType(AuthActions.TRY_SIGNUP),
    switchMap((action: AuthActions.TrySignup) => 
      this.httpClient.post('nodejs_backend_route').pipe(
        map(response => AuthActions.successfulSignup()), // 用action creator更规范
        catchError(error => of(AuthActions.signupFailed({ error })))
      )
    )
  )
);

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