时间戳

首页 > 解决方案 > 如何处理 NGRX 控制流

angular - 如何处理 NGRX 控制流

问题描述

我是 angular + ngrx 的新手，并且对大规模的适当控制流有疑问。假设我有一个Cars可以加载汽车列表并可以创建新车的组件。一旦这些效果执行，它们将调度 SUCCESS和FAILURE操作。在我的ngOnInit中，我订阅了每个成功/失败操作以执行适当的操作 - 例如：

ngOnInit() {
    this.actions$
      .pipe(
        ofType<fromCarsActions.GetCarsSuccessAction>(fromCarsActions.CarsActionTypes.GET_CARS_SUCCESS),
        takeUntil(this.unsubscribe$)
      )
      .subscribe(results => {
        // do something if load all cars SUCCEEDS
      });


      this.actions$
      .pipe(
        ofType<fromCarsActions.GetCarsFailureAction>(fromCarsActions.CarsActionTypes.GET_CARS_FAILURE),
        takeUntil(this.unsubscribe$)
      )
      .subscribe(results => {
        // do something if load all cars FAILS
      });


      this.actions$
      .pipe(
        ofType<fromCarsActions.AddCarSuccessAction>(fromCarsActions.CarsActionTypes.ADD_CAR_SUCCESS),
        takeUntil(this.unsubscribe$)
      )
      .subscribe(results => {
        // do something if add car SUCCEEDS
      });


      this.actions$
      .pipe(
        ofType<fromCarsActions.AddCarsFailureAction>(fromCarsActions.CarsActionTypes.ADD_CAR_FAILURE),
        takeUntil(this.unsubscribe$)
      )
      .subscribe(results => {
        // do something if add car FAILS
      });
}

如果只有少数几个，订阅所有这些 SUCCESS/FAILURE 操作很好，但对于更复杂的组件，很容易很快就失控。

我可以做的另一个选择是在效果本身中调度适当的动作，但这不会使效果非常可重用。

所以我的问题是，对于使用 NGRX 与后端通信以轻松管理订阅/收听多个不同效果成功/失败的组件的最佳实践是什么？

我知道这是一个有点抽象的问题，所以如果我能澄清任何事情，请告诉我。

标签： angularngrx

解决方案

您不需要订阅任何操作。

您应该对减速器和效果器中的操作做出反应。而 effect 最终应该会派发另一个动作。但是您可以将其用于副作用，例如导航。

因此，您在 ngOnInit 中想到的大部分内容都应该在 reducer 中。

推荐阅读