NgRx：将存储值传递给存储选择器

Question

我有一个联赛管理应用 - 带有一个赛季选择器组件，当更改时更新商店中的 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$))
        );
  }

如果我将 AllFixturesBySeasonRequested 调度中的 this.seasonId$ 替换为例如数字，我不会收到错误，因此我认为问题在于将存储变量传递给存储？

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，因此我需要一个选择器来按季节过滤。

Answer 1

您应该向您的操作传递一个数字，而不是一个可观察的，例如：

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

}

如果需要，您可能需要使用 switchMap 来避免嵌套订阅。