2016-11-14 44 views
1

我被卡住了,可以使用一些建议让我指出正确的方向。我有一个数组的商店(上下文:图表数组),数组中的每个商品都有自己的状态。每个项目负责将api调用为api调用,但是当触发新的效果并进行api调用时,它将取消先前的api调用,并从我可以告诉的部分中删除前一个流。任何帮助是极大的赞赏。ngrx效果 - 流在完成之前取消之前的流

效果看起来像这样

@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 
    } 
] 

回答

2

使用mergeMap代替(或concatMap,如果保留的顺序很重要)。

按照documentationswitchMap

项目每个源值到可观察其在输出可观察合并,只能从最近投影的可观察的发光值。

因此,每个效果收到LOAD_CHART动作时间,从任何当前chartApi.getChart退订等

+0

谢谢!工作! – MarkFromFullerton

相关问题