Angular13 NgRx Effect获取map返回对象供tap使用方法

你无法获取已保存对象id的核心原因是tap操作符的回调没有声明入参，没有接收上游数据流传递的返回值。以下是两种可直接落地的实现方式：

方式1：调整操作符顺序，直接读取接口返回对象 #

将处理toastr提示、路由跳转的tap逻辑移动到map操作符之前，此时tap接收到的就是后端接口返回的、携带id的已保存demande对象，逻辑最直观：

saveDemandeEffect: Observable<DemandeActions> = createEffect(
    () => this.effectActions.pipe(
        ofType(EnvelopeActionsTypes.SAVE_ENVELOPE),
        mergeMap((action: DemandeActions) => {
            return this.demandeService.saveDemande(action.payload)
                .pipe(
                    // 接口请求成功后先处理提示、跳转副作用
                    tap((demande) => {
                        this.toastr.success(`保存成功，单据ID：${demande.id}`, "Confirmation")
                        this.router.navigate(['/envelopes']);
                    }),
                    // 再映射为成功Action触发Store状态更新
                    map((demande) => new SaveDemandeActionSuccess(demande)),
                    catchError((err) => of(new SaveDemandeActionError(err.message)))
                )
        })
    )
);

方式2：保留原有操作符顺序，从Success Action中读取对象 #

如果不想调整现有代码的操作符顺序，只需为tap的回调添加入参，此时参数为map返回的SaveDemandeActionSuccess实例，从实例上读取挂载的demande payload即可：

map((demande) => {
    return new SaveDemandeActionSuccess(demande);
}),
tap((successAction) => {
    // 从Action payload中提取已保存的demande对象
    const savedDemande = successAction.payload;
    this.toastr.success(`保存成功，单据ID：${savedDemande.id}`, "Confirmation")
    this.router.navigate(['/envelopes']);
}),
catchError((err) => of(new SaveDemandeActionError(err.message)))

注意：无论使用哪种写法，处理成功逻辑的tap必须放在catchError之前，否则接口请求报错时也会触发成功提示和路由跳转，引发逻辑错误。

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