NgRx Store - conditionally loading data based on property of another state object

Question

I have an app that renders fixtures, results etc from my API based on a season id - this id is stored in state as a property of SeasonState:

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

This is used by other components to determine which fixtures, results etc to fetch from the API and store in state. For example:

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

This works well, but what I'd really like is to be able to only fetch fixtures again fixtures for that particular season are not already stored in state.

I've tried creating a selector to use to conditionally load the data from the API in my effects:

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

But I am unsure how to implement this / whether this is the right approach.

EDIT: using info from the answer below, I have written the following Effect, however see the comment - I need to be able to use seasonId from the payload in my withLatestFrom.

@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

Have your effect setup like this [I am using ngrx 6 so tested on ngrx 6; If you are using some other version then you will get an idea and adjust the code accordingly] -

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

Now you need to dispatch the action which fetches the fixtures for the specified seasonId from your service/component or the way your app is designed.

Hope it will give you an idea and helps in solving your problem.