angular - 异步 NgRx 动作的处理

我有一个 Angular 应用程序，主视图被分成两个组件。这将涉及以异步方式处理 NgRx 动作的派发。

1) MenuComponent - 这个包含了各种导航按钮，比如注销按钮。点击注销按钮时，它会调用 authenticationService.logout()，该方法会向后台发送 HTTP 请求，然后登出用户。因此，这是一个异步操作。

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

2) DashboardComponent - 我已经编写了以下内容来处理 OnDestroy 生命周期钩子，该钩子将在组件被销毁时调用。它使用 NgRx 进行状态管理。

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

调度 UpdateDashboardConfiguration() 操作将导致应用程序向服务器发送 HTTP 请求以保存仪表板的配置，因此它也是异步的。

主要问题是，当用户决定通过点击 MenuComponent 上的注销按钮来注销时，有没有办法确保在派发 ClearDashboardState() 动作以及来自其他 MenuComponent 的 authenticationService.logout() 被调用之前，UpdateDashboardConfiguration() 的派发能够完成？

首选流程如下：

UpdateDashboardConfiguration => ClearDashboardState => logout()

对于那些感到困惑的人来说，this.store.dispatch(new UpdateDashboardConfiguration()).subscribe(...) 是不起作用的，因为 store.dispatch() 的类型是 void，而不是 observable。

提前谢谢你。

对于有兴趣的人，这是 UpdateDashboardConfiguration 操作的 Effect。

@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))),
    );
  }
  ),
);

答案＃1

听起来你需要修改你的注销函数正在执行的操作。如果你希望你的操作按特定顺序执行，就不应该让它们异步运行。

既然你正在使用 NgRx，你应该派发一个 LogoutClicked 动作，而不是调用服务函数。这将允许你控制流程，以便按正确的顺序处理所有内容。你可以设置一个 effect 来处理 LogoutClicked 并派发 UpdateDashboardConfiguration 动作。然后，当你处理 UpdateDashboardConfigurationSuccess 时，你可以决定是否需要派发 ClearDashboardState 动作，从那里你最终可以派发一个调用注销服务函数的 Logout 动作。

你可能需要更新你的操作中包含的有效负载，以帮助效果决定接下来要分发哪些操作。你可以使用这里找到的基于内容的决策者效果模式。