RxJS groupBy with NgRx 选择器永远不会完成

Question

从我的 API 中检索灯具列表，我尝试按日期对这些灯具进行分组，这在我直接在我的组件中调用服务时有效，但在我从商店中选择灯具时无效。

以下输出 2 个数组 - 即 2 组基于其日期的夹具：

this.store.pipe(
select(selectCurrentSeasonId)
).subscribe(seasonId =>  {
this.fixtureService.getFixtures(seasonId).pipe(
mergeMap(fixtures => fixtures),
groupBy(fixture => fixture.matchDate),
mergeMap(group => group.pipe(toArray())),
tap(res => console.log(res))
).subscribe(fixtures => this.fixtures$ = fixtures);

但是，当对灯具使用商店选择器而不是服务调用时，我没有得到任何输出：

this.store.pipe(
select(selectCurrentSeasonId)
).subscribe(seasonId =>  {
this.store.dispatch(loadFixtures({seasonId}));
this.store.pipe(
select(selectAllFixtures),
mergeMap(fixtures => fixtures),
groupBy(fixture => fixture.matchDate),
mergeMap(group => group.pipe(toArray())),
tap(res => console.log(res))
).subscribe(fixtures => this.fixtures$ = fixtures);
});

如果我tap()移动到第 2 个mergeMap()以上，我会在控制台中获得 GroupedObservable 输出，但我无法迭代它。

Answer 1

问题是您正在使用仅在其源 Observable 在永不完成的 Observable 上完成时才发出toArray()(this.store(。groupBy发出的每个组在源可观察量完成或可选durationSelector发出时完成 (https://rxjs.dev/api/operators/groupBy(。由于 ngrx 存储永远不会完成，因此每个单独的组也永远不会自己完成。

看起来您可能希望在select(selectAllFixtures)之后使用take(1)，因为随后您将使用mergeMap来解压缩阵列以分离排放。