angular - 操作 CREATE_SUCCES 后重定向

Question

我有一个组件来创建新记录...提交表单时，我会发送一个 CREATE 操作。

在这个组件的 OnInit 中我有一个 ActionsSubject 订阅捕捉 CREATE Action 的完成。完成后我重定向到概览组件。

这在我第一次插入记录时工作正常，但是当尝试添加第二条记录时，一旦我回到创建组件并且我被重定向回概览，就会立即点击 actionssubject 完成订阅。

redirectSub: Subscription;

constructor(
  private store: Store<fromRoot.State>,
  private router: Router,
  private actionsSubject: ActionsSubject
) { }


ngOnInit() {
  this.redirectSub = this.actionsSubject.asObservable().pipe(
    ofType(ContactsActionTypes.CREATE_SUCCESS)
  ).subscribe(
    (action: CreateSuccess) => this.router.navigate(['/contacts', action.payload.id])
  );
}

ngOnDestroy() {
  this.redirectSub.unsubscribe();
}

submitted(subspecialisatie: SubSpecialisatie) {
  this.store.dispatch(new Create(subspecialisatie));
}




@Effect()
create$: Observable<Action> = this.actions$.pipe(
ofType(SubSpecialisatiesActionTypes.CREATE),
map((action: Create) => action.payload),
switchMap((subspecialisatie) => this.subspecialisatieService.createSubSpecialisatie(subspecialisatie)),
map((createdSubSpecialisatie: SubSpecialisatie) => new CreateSuccess(createdSubSpecialisatie))
);

我应该能够回到创建组件而不会立即被重定向...

Answer 1

我想我明白你做错了什么，你正在监听 Action 并在组件处理它，这是不好的。你应该听取 Action 只在reducers(如果它是同步处理程序+它产生新状态)或效果(如果它是异步处理程序，或者只是副事件)。因此，您可以在Effects 处收听CREATE_SUCCESS 并在那里重新路由。例如:

constructor(
   ...,
   private router: Router,
   ...
) { }

@Effect({ dispatch: false })
createSuccess$: Observable<Action> = this.actions$.pipe(
   ofType(SubSpecialisatiesActionTypes.CREATE_SUCCESS),
   tap((action) => this.router.navigate(['/contacts', action.payload.id]))
);

希望对您有所帮助。