RxJS问题排查：登出请求场景下finalize算子未触发如何解决

问题根因 #

• 你的finalize回调实际已经执行，感知不到执行是因为用法不符合算子设计逻辑：finalize是RxJS提供的流终止钩子，仅用于执行无返回值的清理类副作用（比如打印日志、销毁定时器/资源），回调的返回值会被完全忽略，你在内部返回的of(xxx)生成的action不会被NgRx Effect捕获，自然不会触发派发，看起来就像没执行一样。
• finalize本身就不是用来生成需要传递给下游的数据流的，完全不匹配你的需求场景。

正确实现方案 #

你的需求是无论请求成功还是失败，都在原有结果后追加两个固定要派发的action，直接使用endWith算子即可，修改后代码如下：

logout$ = createEffect(() =>
    this.actions$.pipe(
        ofType(ClassicAuthActions.logout),
        switchMap(action => this.api.logout().pipe(
            map(() => ClassicAuthActions.logoutDidSuccess()),
            catchError(err => of(ClassicAuthActions.logoutDidFail())),
            // 流正常结束（包括被catchError处理后的错误场景）后自动追加以下action
            endWith(
                ClassicAuthActions.deleteUserCommunicationToken(),
                ClassicAuthActions.clearUser(action.redirect)
            )
        ))
    )
);

补充说明 #

如果你要验证finalize确实执行，可以加一行打印测试，不推荐在里面手动调用store派发action，不符合NgRx Effect的设计规范：

finalize(() => {
  console.log('finalize 回调已执行')
  // 非必要不要手动调用dispatch
  // this.store.dispatch(ClassicAuthActions.deleteUserCommunicationToken())
})

内容的提问来源于stack exchange，提问作者Manuel Brás