Angular中NgRx Effect请求成功后如何根据返回数据跳转路由？

NgRx 路由跳转逻辑方案说明 #

方案1：直接在现有Effect中处理（仅推荐跳转逻辑永久和创建操作强绑定时使用） #

这种方式实现最简单，直接在接收到接口返回数据后，先执行跳转，再返回成功Action即可。
首先修正你原有代码的语法错误：catchError 错误放在了map的入参位置，需要调整为和map平级的管道操作符。同时你原有错误捕获逻辑直接返回of(error)，没有封装成失败Action，会导致类型校验报错，也无法处理创建失败的后续逻辑，同步做了修正。
修改后的代码：

createAssignment$ = createEffect(() =>
  this.action$.pipe(
    ofType(AssignmentActions.createAssignment),
    switchMap((action) =>
      this.assignmentService.createNewAssignment(action.assignmentTo).pipe(
        map((data) => {
          // 新增路由跳转逻辑
          this.router.navigate(data);
          return AssignmentActions.createAssignmentSuccess({ createdAssignment: data });
        }),
        catchError((error) => of(AssignmentActions.createAssignmentFailure({ error })))
      )
    )
  )
);

方案2：新增独立Effect处理跳转（推荐） #

这是更符合NgRx设计原则的实现，符合关注点分离的要求：原有Effect只负责处理接口请求、分发成功/失败Action，路由跳转作为独立的副作用单独维护，后续如果有其他场景需要触发生成成功后的跳转、或者需要新增跳转前置校验逻辑（比如权限判断、参数合法性校验）时，不需要修改原有创建逻辑的代码，可维护性更强，也方便用Redux DevTools做流程调试。
实现代码如下：

// 原有创建Assignment的Effect保持不变，仅修正语法和错误捕获逻辑即可
createAssignment$ = createEffect(() =>
  this.action$.pipe(
    ofType(AssignmentActions.createAssignment),
    switchMap((action) =>
      this.assignmentService.createNewAssignment(action.assignmentTo).pipe(
        map((data) => AssignmentActions.createAssignmentSuccess({ createdAssignment: data })),
        catchError((error) => of(AssignmentActions.createAssignmentFailure({ error })))
      )
    )
  )
);

// 新增独立的路由跳转Effect
navigateAfterCreateSuccess$ = createEffect(() =>
  this.action$.pipe(
    ofType(AssignmentActions.createAssignmentSuccess),
    tap((action) => this.router.navigate(action.createdAssignment))
  ),
  { dispatch: false } // 该Effect不需要返回新的Action，关闭dispatch避免运行时警告
);

选型建议 #

• 如果项目体量很小，且确定createAssignmentSuccess永远只有创建操作这一个触发来源，跳转逻辑也不会有后续扩展，可以选择方案1
• 绝大多数中大型项目、或者后续有迭代可能的项目，都推荐使用方案2，符合NgRx的官方最佳实践

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