angular - 异步NgRx Action 的处理

我有一个角度应用程序，主视图分为两部分。这将是以异步方式处理NGRX操作的调度。
1）MenuComponent-这包含各种导航按钮，如注销按钮。单击注销按钮后，它将调用authenticationService.logout()，后者将向后端发送一个http请求，然后注销用户。因此，这是一个异步操作。

public logout() {
  this.authenticationService.logout();
  this.router.navigate(['login']);
}

2）DashboardComponent-我已经编写了以下代码来处理生命周期钩子，当组件被破坏时将调用它。它使用ngrx进行状态管理。

ngOnDestroy() {
  this.store.dispatch(new UpdateDashboardConfiguration());
  this.store.dispatch(new ClearDashboardState());
}

分派OnDestroy操作将导致应用程序向服务器发送http请求以保存仪表板的配置，因此它也是异步的。
主要问题是，当用户决定通过单击UpdateDashboardConfiguration()上的“注销”按钮注销时，是否有方法确保在调用其他菜单组件的MenuComponent操作以及UpdateDashboardConfiguration()操作之前完成ClearDashboardState()的调度？
优选的流程如下：
authenticationService.logout()=>UpdateDashboardConfiguration=>ClearDashboardState
对于那些想知道的人，logout()不会工作，因为store.dispatch（）是空类型的，并且不是可观察的。
提前谢谢你。
对于感兴趣的人，这是updatedashboardconfiguration操作的this.store.dispatch(new UpdateDashboardConfiguration()).subscribe(...)。

@Effect()
UpdateDashboardConfiguration$ = this.actions$.pipe(
  ofType<UpdateDashboardConfiguration>.(DashboardActionTypes.UpdateDashboardWidget),
  withLatestFrom(this.store.select(selectDashboardLayoutStateConfig)),
  switchMap(action => {
    return this.dashboardService.updateDashboardConfiguration(action).pipe(
      map(data => (new UpdateDashboardConfigurationSuccess(data))),
    );
  }
  ),
);

最佳答案

听起来你需要修改注销函数的功能。如果您有一个所需的操作执行顺序，则不应该让它们异步运行。
因为您使用的是ngrx，所以应该发送LogoutClicked操作，而不是调用服务函数。这将允许您控制流，以便您可以按照正确的顺序处理所有事情。您可以设置处理LogoutClicked并分派UpdateDashboardConfiguration操作的效果。然后，当您处理UpdateDashboardConfigurationSuccess时，您可以决定是否需要分派一个ClearDashboardState操作，从那里您最终可以分派一个调用注销服务函数的Logout操作。
您可能需要更新操作中包含的有效负载，以帮助效果决定下一步要分派哪些操作。您可以使用here找到的基于内容的决策器效果模式。