NgRx：如何在单个Effect中调用API后触发多个Action

NgRx Effect 本身支持返回发出多个 Action 的 Observable 流，你只需要将原代码中返回单个 Action 的逻辑调整为返回包含多个 Action 的 Observable 即可，不需要新增额外的 Effect。

改造后完整代码 #

// 提前导入rxjs的of操作符
import { of } from 'rxjs';

changeStatus$ = createEffect(() => 
  this.actions$.pipe(
    ofType(fromJtDetail.changeStatus),
    switchMap(action =>
      this.jtDetailService.changeStatus(action.entity,action.jobTicketId).pipe(
        // 替换原map操作符为switchMap，用of包裹所有需要触发的Action
        switchMap(res => of(
          // 原有业务Action
          fromJtDetail.statusChanged({changedStatus: action.entity.newStatus}),
          // 可根据业务需求新增任意数量的Action，以下为示例
          fromJtDetail.syncRelatedTaskList({jobTicketId: action.jobTicketId}),
          fromCommon.showGlobalTip({type: 'success', content: '状态修改成功'})
        )),
        catchError(error => of(
          // 错误场景也可触发多个Action，以下为示例
          fromCommon.showGlobalTip({type: 'error', content: '状态修改失败'}),
          fromJtDetail.resetStatusEditState()
        ))
))));

注意说明 #

• 此处用of操作符将多个 Action 组合为一个 Observable 流，Effect 会自动按顺序触发流中的所有 Action
• 不需要修改createEffect的默认配置，原生支持返回多个 Action 的流
• 可根据实际业务需求替换示例中的新增 Action 为对应业务逻辑的Action即可

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