angular - ngrx 效果 - 流在完成之前取消以前的流

Question

我被卡住了，可以使用一些建议让我指向正确的方向。我有一个数组商店(对于上下文:图表数组)，数组中的每个项目都有自己的状态。每个项目负责使 API 成为 api 调用，但是当触发新效果并进行 api 调用时，它会取消以前的 api 调用，据我所知，它会一起取消以前的流。任何帮助是极大的赞赏。

效果是这样的

@Effect() addCharts$ = this.actions$
    .ofType(LOAD_CHART)
    .switchMap((action) => {
        return this.chartApi.getChart(action.payload.url).map((res) => {
          res.id = action.payload.id;
          res.url = action.payload.url;
          return res;
        });
    })
    .map((result: any) => {
        debugger;
        return {
          type: LOAD_CHART_SUCCESS,
          payload: result
        }
    })
    .catch((error: any) => {
        debugger;
        return Observable.of({
            type: LOAD_CHART_FAILURE,
            payload: error.detail
        });
    });

最终结果使我的商店看起来像这样。

[
  {
    id: 1,
    data: null,
    loading: true,
    loaded: false
  },
  {
    id: 2,
    data: {
      ...
    }
    loading: false,
    loaded: true
  }
]

Answer 1

改用 mergeMap(如果保留顺序很重要，则使用 concatMap)。

根据documentation switchMap

projects each source value to an Observable which is merged in the output Observable, emitting values only from the most recently projected Observable.

因此，每次效果接收到 LOAD_CHART 操作时，它都会取消订阅任何当前的 chartApi.getChart，等等。