CODEWITHSUNDEEP
angularrxjsngrx
DJC
DJC

Reputation: 1173

NgRx: Passing store value to store selector

I have a league management app - with a season selector component that updates the SeasonState.currentlySelectedSeasonId in the store when changed.

In my fixture component I want to use this seasonId to pass to a selector to get fixtures for that season.

However, I get the following error (I am using NgRx Store Freeze) which appears to suggest I am directly mutating the state.

ERROR TypeError: Cannot assign to read only property 'active' of object '[object Object]'

fixture.component.ts

ngOnInit() {
    this.seasonId$ = this.store
        .pipe(
            select(selectCurrentlySelectedSeason)
        ).subscribe();

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

If I replace this.seasonId$ in the dispatch of AllFixturesBySeasonRequested, with a number for example, I don't get the error so I assume the issue is passing a store variable to the store?

fixture.selectors.ts

export const selectAllFixtures = createSelector(
    selectFixturesState,
    fromFixture.selectAll
);

export const selectAllFixturesFromSeason = (seasonId: number) => createSelector(
    selectAllFixtures,
    fixtures => {
        return fixtures.
            filter(fixture => fixture.seasonId === seasonId);
    }
);

Other relevant code:

fixture.actions.ts

export class AllFixturesBySeasonRequested implements Action {
    readonly type = FixtureActionTypes.AllFixturesBySeasonRequested;
    constructor(public payload: { seasonId: number }) {}
}

fixture.effects.ts

@Effect()
  loadFixturesBySeason$ = this.actions$
      .pipe(
          ofType<AllFixturesBySeasonRequested>(FixtureActionTypes.AllFixturesBySeasonRequested),
          mergeMap(({payload}) => this.fixtureService.getFixturesBySeason(payload.seasonId)),
          map((fixtures) => new AllFixturesBySeasonLoaded({fixtures}))
      );

Further info as to the architecture I am trying to implement a store solution whereby fixtures (and same will be for results, teams etc) are only loaded by season, rather than fetching all from all seasons. They should then be kept in the store to avoid further API calls if they are needed again, and therefore I need a selector to filter by season.

Upvotes: 0

Views: 1745

Answers (1)

Bernard Pagoaga
Bernard Pagoaga

Reputation: 1396

You should pass a number to your action instead of an observable, such as :

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

}

If needed you might need to use switchMap to avoid nesting subscriptions.

Upvotes: 2

Related Questions