带有 NgRx 选择器的 RxJS groupBy 永远不会完成

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() 移动到第二个 mergeMap() 上方，我会在控制台中得到一个 GroupedObservable 输出，但我无法对其进行迭代。

Answer 1

问题是您使用的是toArray()，它仅在其源 Observable 在一个永远不会完成的 Observable 上完成时发出 (this.store)。当源 Observable 完成或可选的 durationSelector 发出 (https://rxjs.dev/api/operators/groupBy) 时，groupBy 发出的每个组都完成。由于 ngrx 商店永远不会完成，因此每个单独的组永远不会自己完成。

看起来您可能想在select(selectAllFixtures) 之后使用take(1)，因为您正在使用mergeMap 将数组解包以分离发射。