Question

我有一个应用程序，可以根据季节ID从我的API渲染灯具，结果等-该ID作为SeasonState的属性以状态存储：

export interface SeasonsState extends EntityState<Season> {
  allSeasonsLoaded: boolean;
  currentlySelectedSeasonId: number;
}

其他组件使用它来确定要从API中获取并存储状态的灯具，结果等。例如：

this.store
    .pipe(
        select(selectCurrentlySelectedSeason)
    ).subscribe(seasonId => {
  this.store.dispatch(new AllFixturesBySeasonRequested({seasonId}));
  this.fixtures$ = this.store
      .pipe(
          select(selectAllFixturesFromSeason(seasonId))
      );
});

这很好，但是我真正想要的是只能再次获取固定装置，该特定季节的固定装置尚未存储在状态中。

我尝试创建一个选择器来有条件地从我的效果中从API加载数据：

export const selectSeasonsLoaded = (seasonId: any) => createSelector(
    selectFixturesState,
    fixturesState => fixturesState.seasonsLoaded.find(seasonId)
);

但是我不确定如何实施此方法/这是否是正确的方法。

编辑：使用来自以下答案的信息，我编写了以下效果，但是请参见注释-我需要能够使用withLatestFrom中有效负载中的seasonId。

@Effect()
loadFixturesBySeason$ = this.actions$
  .pipe(
      ofType<AllFixturesBySeasonRequested>(FixtureActionTypes.AllFixturesBySeasonRequested),
      withLatestFrom(this.store.select(selectAllFixtures)), // needs to be bySeasonId
      switchMap(([action, fixtures]) => {
          if (fixtures.length) {
              return [];
          }
          return this.fixtureService.getFixturesBySeason(action.payload.seasonId);
      }),
      map(fixtures => new AllFixturesBySeasonLoaded({fixtures}))
  );

Answer 1

具有这样的效果设置[我正在使用在ngrx 6上经过测试的ngrx 6；如果您使用的是其他版本，那么您将有所了解并相应地调整代码]-

@Effect() allFixturesBySeasonRequested: Observable<Action> =
  this._actions$
      .pipe(
          //Please use your action here;
          ofType(actions.AllFixturesBySeasonRequested),
          //please adjust your action payload here as per your code
          //bottom line is to map your dispatched action to the action's payload
          map(action => action.payload ),
          switchMap(seasonId => {
              //first get the fixtures for the seasonId from the store
              //check its value if there are fixtures for the specified seasonId
              //then dont fetch it from the server; If NO fixtures then fetch the same from the server
              return this.store
                        .pipe(
                            select(selectAllFixturesFromSeason(seasonId)),
                            //this will ensure not to trigger this again when you update the fixtures in your store after fetching from the backend.
                            take(1),
                            mergeMap(fixtures => {
                                //check here if fixtures has something OR have your logic to know
                                //if fixtures are there
                                //I am assuming it is an array
                                if (fixtures && fixtures.lenght) {
                                    //here you can either return NO action or return an action
                                    //which informs that fixtures already there
                                    //or send action as per your app logic
                                    return [];
                                } else {
                                    //NO fixtures in the store for seasonId; get it from there server
                                    return this.http.get(/*your URL to get the fixtures from the backend*/)=
                                               .pipe(
                                                   mergeMap(res => {
                                                        return [new YourFixtureFetchedSucccess()];
                                                    }
                                                   )
                                               )
                                }
                            })
                        );
          })
      )

现在，您需要分派从服务/组件或应用程序的设计中为指定的seasonId获取固定装置的操作。

希望它会给您一个想法，并帮助您解决问题。

NgRx Store-根据另一个状态对象的属性有条件地加载数据

1 个答案: