处理异步 NgRx 操作

Question

我有一个 Angular 应用程序，主视图分为 2 个组件。这将涉及以异步方式处理 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上的注销按钮决定注销时，有没有办法确保UpdateDashboardConfiguration()的调度在ClearDashboardState()动作的调度之前完成，以及来自其他 MenuComponent 的 authenticationService.logout() 被调用？

首选流程如下：

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

Answer 1

听起来您需要修改注销功能正在执行的操作。如果您有执行操作的所需顺序，则不应让它们异步运行。

由于您使用的是 NgRx，因此您应该调度 LogoutClicked 操作而不是调用服务函数。这将允许您控制流程，以便您可以按正确的顺序处理所有内容。您可以设置处理LogoutClicked 并调度UpdateDashboardConfiguration 操作的效果。然后，当您处理 UpdateDashboardConfigurationSuccess 时，您可以决定是否需要发送 ClearDashboardState 操作，然后您最终可以从那里发送一个调用您的注销服务函数的 Logout 操作。

您可能需要更新您的操作中包含的有效负载，以帮助效果决定接下来要调度哪些操作。您可以使用 here 找到的基于内容的判定器效果模式。