如何处理 NGRX 控制流

Question

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

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 与后端通信以轻松管理订阅/收听多个不同效果 success/failure 的组件，最佳实践是什么？

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

Answer 1

您不需要订阅任何操作。

你应该对 reducer 和 effects 中的动作做出反应。 effect 最终应该派发另一个动作。但是你可以将它用于副作用，比如导航。

所以你在 ngOnInit 中想到的大部分事情都应该在 reducer 中。

Answer 2

你触发了动作

Action 将触发 Reducer（仅更新存储）或 Effect(处理负责从数据库中获取数据的服务）

然后您可以订阅 选择器 以获取更改。

在你的情况下创建操作 -

export const loadCars = createAction('Load Car data');

export const getcarsSuccess = createAction('Get Car data Success', props<{ carData: any }>());

export const getCarsError = createAction('Get Car data Error', props<{ errorResponse: any}>());

export const createCars = createAction('Add Car data');

export const createCarsSuccess = createAction('Add Car data Success', props<{ carData: any }>());

export const createCarsError = createAction('Add Car data Error', props<{ errorResponse: any}>());

以上action可以触发一个effect或者reducer

生效：

 @Effect()
  public loadCarData$ = createEffect(() => this.actions$.pipe(
    ofType(actions.loadCars ) ...

在减速器中：

 const initReducer = createReducer(
  initialIState,
  on(actiona.loadCarData, state => (state)))

在选择器中：

export const carDataLoaded = (state: fromReducer.carData) => state.carData ;

export const getCarData = createSelector(
  getInitState,
  carDataLoaded 
);

最后在组件中：

可以订阅selector getCarData，所以component-action-effect-reducer-selector-component

比赛中

 private carStore: Store<carStore> 
  this.carStore.dispatch(new loadCars ()); //dispatch load Cars Action
 this.carStore.pipe(select(
            getCarData })
        ).subscribe(cars => console.log(cars)) // subscribe to selector

注意：您可以直接从您提到的组件订阅任何操作，但这不会达到使用 NGRX 状态管理的目的。

从 Angular 应用程序中的任何位置更新 NGRX 商店，并从应用程序中您想要的任何位置访问商店数据。无需担心维护数据状态。

如何处理 NGRX 控制流

How to handle NGRX control flow

ngrx

angular