Angular 如何处理NGRX控制流

我是angular+ngrx的新手，对标尺上的正确控制流量有疑问。假设我有一个

Cars

组件，它可以加载一个汽车列表并创建一辆新车。一旦这些效果执行，它们将调度

成功

和

失败

操作。在my

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

ngOnInit（）{
这是我的行动$
.烟斗(
类型（来自carsactions.CarsActionTypes.GET\u CARS\u SUCCESS），
takeUntil（此.取消订阅$）
)
.订阅（结果=>{
//如果装载所有车辆成功，请执行某些操作
});
这是我的行动$
.烟斗(
类型（来自carsactions.CarsActionTypes.GET\u CARS\u FAILURE），
takeUntil（此.取消订阅$）
)
.订阅（结果=>{
//如果装载所有车辆失败，请采取措施
});
这是我的行动$
.烟斗(
类型（来自carsactions.CarsActionTypes.ADD\u CAR\u SUCCESS），
takeUntil（此.取消订阅$）
)
.订阅（结果=>{
//如果添加汽车成功，请执行某些操作
});
这是我的行动$
.烟斗(
类型（来自carsactions.CarsActionTypes.ADD\u CAR\u FAILURE），
takeUntil（此.取消订阅$）
)
.订阅（结果=>{
//如果add car失败，请采取措施
});
}

如果只有少数成功/失败操作，那么订阅所有这些成功/失败操作就可以了，但是对于更复杂的组件，很容易很快就失去控制

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

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

---

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

您不需要订阅任何操作

你应该对减速器和效果中的动作做出反应。最终，效果应该会发出另一个动作。但是你可以用它来做副作用，比如说导航

---

因此，您在ngOnInit中想到的大多数事情都应该在reducer中。

您不需要订阅任何操作

你应该对减速器和效果中的动作做出反应。最终，效果应该会发出另一个动作。但是你可以用它来做副作用，比如说导航

---

因此，您在ngOnInit中想到的大多数事情都应该在减速器中。

您触发了动作

操作将触发一个还原程序（仅更新存储）或效果（处理服务-负责从数据库获取数据）

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

在您的情况下，创建操作-

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

在减速器中：

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

在选择器中：

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

export const getCarData = createSelector(
  getInitState,
  carDataLoaded 
);

最后，在组件中：

您可以订阅选择器getCarData，所以组件-动作-效果-减速器-选择器-组件

补偿

 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

private carStore:Store
this.carStore.dispatch（new loadCars（））//调度装载车行动
此.carStore.pipe（选择(
getCarData}）
).subscribe（cars=>console.log（cars））//订阅选择器

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

---

从Angular应用程序中的任意位置更新NGRX存储，并从应用程序中的任意位置访问存储数据。无需担心维护数据状态。

您可以触发操作

操作将触发一个还原程序（仅更新存储）或效果（处理服务-负责从数据库获取数据）

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

在您的情况下，创建操作-

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

在减速器中：

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

在选择器中：

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

export const getCarData = createSelector(
  getInitState,
  carDataLoaded 
);

最后，在组件中：

您可以订阅选择器getCarData，所以组件-动作-效果-减速器-选择器-组件

补偿

 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

private carStore:Store
this.carStore.dispatch（new loadCars（））//调度装载车行动
此.carStore.pipe（选择(
getCarData}）
).subscribe（cars=>console.log（cars））//订阅选择器

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

---

从Angular应用程序中的任意位置更新NGRX存储，并从应用程序中的任意位置访问存储数据。不用担心维护数据的状态。

没错，但据我所知，缩减器应该只更改状态。例如，如果我在成功添加汽车后需要导航到某个页面，那么应该在哪里处理？或者你是说在成功添加一辆汽车后，我的效果需要发送一个导航到另一个页面的操作？谢谢你的回复！成功添加汽车后，您可以订阅选择器。为newCarAdded创建一个选择器当您在添加汽车时更新商店时，选择器将被订阅。您可以在应用程序中的任何位置访问此选择器，这是一个优势。我不同意。任何副作用都应进入“效果”部分。所以导航应该去那里。对，但据我所知，减速器应该改变状态。例如，如果我在成功添加汽车后需要导航到某个页面，那么应该在哪里处理？或者你是说在成功添加一辆汽车后，我的效果需要发送一个导航到另一个页面的操作？谢谢你的回复！成功添加汽车后，您可以