NgrX 效果重定向 angular

Question

我有这样的效果

  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(error))),
        )
      )
    ));

我需要的是根据数据中的值将用户重定向到新页面，就像这样

 this.router.navigate(data);

但是不知道什么时候做，是做新的效果还是刚做的？有人遇到过类似的问题吗？

Answer 1

您可以在 map 之后使用 tap 运算符来完成此操作，只有在操作成功时才会调用该运算符：

createAssignment$ = createEffect(() =>
    this.action$.pipe(
        ofType(AssignmentActions.createAssignment),
        switchMap((action) =>
            this.assignmentService
                .createNewAssignment(action.assignmentTo)
                .pipe(catchError((error) => of(error)))
        ),
        map((data) => AssignmentActions.createAssignmentSuccess({ createdAssignment: data })),
        tap((data) => { this.router.navigate(data); })
    )
);

Answer 2

我建议为重定向创建单独的效果。 New Effect 封装了自己的逻辑并使其也可重用。监听多个有效的动作应该是常见的模式。

在你的效果器中注入路由器 class assignemnts.effects.ts

构造函数( ... 私有只读路由器：路由器）{}
你的代码

监听您的 AssignmnetActions.CreateAssignemntSuccess({assignment}); 的重定向效果场景：它将获取分配中用户的 ID 并重定向到 /user-details 页面。

userPageRedirect$ = createEffect(() =>
    this.actions$.pipe(
      ofType(AssignmnetActions.CreateAssignemntSuccess()),
      concatMap((action) => of(action).pipe(withLatestFrom(this.store.pipe(select(getSelectedUserId))))),
      fetch({
        run: (action, userId: number) => {
          this.router.navigate([`/user-details/${userId}`]);
        },
      })
    ));

NgrX 效果重定向 angular

NgrX effect redirect angular

typescript

ngrx

angular