处理异步 NgRx 操作

Posted 2023-03-13

【中文标题】处理异步 NgRx 操作

【英文标题】：Handling of asynchronous NgRx actions

【发布时间】：2019-10-16 05:50:29

【问题描述】：

我有一个 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))),
    );
  
  ),
);

【参考方案1】：

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

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

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

【讨论】：

感谢您的回答。不幸的是，我没有为我的 MenuComponent 使用 NgRx，因为我不需要为此维护任何形式的状态。但是，这确实是一个有效的建议。