NgRx: передача значения магазина в селектор магазина - PullRequest
Новая
       7

NgRx: передача значения магазина в селектор магазина

0 голосов
/ 28 апреля 2019

У меня есть приложение управления лигой - с компонентом выбора сезона, который обновляет SeasonState.currentlySelectedSeasonId в хранилище при изменении.

В моем компоненте приборов я хочу использовать этот seasonId, чтобы перейти к селектору для получения приборов для этого сезона.

Тем не менее, я получаю следующую ошибку (я использую NgRx Store Freeze), которая указывает на то, что я напрямую изменяю состояние. 

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

Если я заменю this.seasonId $ в отправке запроса AllFixturesBySeasonRequested, например, на число, я не получу сообщение об ошибке, поэтому я предполагаю, что проблема заключается в передаче переменной хранилища в хранилище?

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

Другой соответствующий код:

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

Дополнительная информация об архитектуре Я пытаюсь реализовать решение для магазина, в котором матчи (и то же самое будет для результатов, команд и т. Д.) Загружаются только по сезонам, а не выбирают все из всех сезонов. Затем их следует хранить в магазине, чтобы избежать повторных вызовов API, если они понадобятся снова, и поэтому мне нужен селектор для фильтрации по сезону.

1 Ответ

2 голосов
/ 29 апреля 2019

Вы должны передать число вашему действию вместо наблюдаемого, например: 

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

}

При необходимости вам может понадобиться использовать switchMap, чтобы избежать вложенных подписок.

...