我被困住了,可以用一些建议让我指出正确的方向。我有一个数组的存储(对于上下文:一个图表数组),并且数组中的每个项目都有自己的状态。每个项目负责将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
}
]
答案 0 :(得分:7)
使用mergeMap
代替(或concatMap
,如果保留订单很重要。)
根据documentation switchMap
将每个源值投影到一个Observable,该Observable在输出Observable中合并,仅从最近投影的Observable中发出值。
因此,每当效果收到LOAD_CHART
动作时,它都会取消订阅任何当前chartApi.getChart
等。