Dispatch action N 次，但只执行一次 API 调用并合并结果 N 次

Question

我在 Angular 应用程序中有同一个组件的多个实例。组件的每个实例都将调度一个操作[Action] LoadData 以从外部 API 加载数据。该操作的有效负载包含有关哪个组件调度该操作的信息，以便能够将其存储在store 中正确的对应位置。

无论操作中包含什么其他有效负载，每次获取的数据都是相同的。既然是这种情况，我不需要执行多个 API 调用来加载相同的数据，因此我可以使用 switchMap 取消任何以前未完成的调用。

为此我有两个作用，一个是加载数据：

@Effect({ dispatch: false })
loadData$ = this.actions$.pipe(
    ofType<LoadData>(LOAD_DATA),
    switchMap((action) => { // This will cancel out any previous service call
        return this.service.loadData().pipe(
            tap(val => {
                console.log(`Loading data...`)
                this.dataSubject$.next(val) // When the data is fetched, emit on the subject
            })
        );
    })
);

一个处理与数据结合的调度动作

@Effect()
handleActionAndDataLoaded$ = combineLatest(
    this.actions$.pipe(
        ofType<LoadData>(LOAD_DATA)
    ),
    this.dataSubject$.asObservable()
).pipe(
    tap(_ => console.log(`All done`))
)

其中dataSubject$ 是Subject。

这对我来说是棘手的部分。如果LoadData 动作已被调度n 次，我需要触发第二个效果n 次，然后结合其他动作有效负载处理数据因此。我现在得到的是第二种效果的一个触发器。

阅读combineLatest 并查看大理石图，这当然是预期的行为。

在大理石图中我得到类似的东西

我需要的是类似下面的东西。

我知道还有其他方法可以通过更改应用程序架构中的其他内容来解决整个问题，但这是我目前必须解决的问题，在我看来这是一个有趣的rxjs 问题！

如何做到这一点？我缺少什么运算符组合？

Answer 1

我假设它应该看起来更类似于第一张图：

actions -1-2-3-----------
data    ---------B-------
result  ---------(1B2B3B)

否则，您似乎希望 LoadData 操作与之前获取的数据配对。

您可以使用合并和扫描创建状态机：

const createEffectWithScan = (actions$: Observable<string>, subject$: Observable<string>) =>
  merge(
    actions$.pipe(map(x => ({ type: 'action', value: x }))),
    subject$.pipe(map(x => ({ type: 'data', value: x }))),
  ).pipe(
    scan(
      (a, b) => b.type === 'action'
        ? { data: null, toEmit: [], buffer: [...a.buffer, b.value] }
        : { data: b.value, toEmit: a.buffer, buffer: []  }
      , { data: null, buffer: [], toEmit: [] }
    ),
    filter(x => x.data !== null),
    concatMap(x => x.toEmit.map(a => a + x.data))
  );

Stackblitz

正如您所提到的，这是一个很好的练习，但可能应该以另一种方式解决。通过主题命令式地戳值并不是一个好的解决方案。