CODEWITHSUNDEEP
angulartypescriptngrx
MarkFromFullerton
MarkFromFullerton

Reputation: 179

ngrx effects - streams canceling previous streams before completing

I am stuck and could use some advice to get me pointed in the right direction. I have a store that is an array (for context: an array of charts) and each item in the array has its own state. each item is responsible for making an API an api call however when a new effect is triggered and makes an api call, it cancels the previous api call and from what i can tell cancels out the previous stream all together. any help is greatly appreciated.

The effect looks like this 

@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
        });
    });

The end result makes my store look like this. 

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

Upvotes: 3

Views: 910

Answers (1)

cartant
cartant

Reputation: 58410

Use mergeMap instead (or concatMap, if preserving the order is important).

According to the 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.

So each time the effect receives a LOAD_CHART action, it unsubscribes from any current chartApi.getChart, etc.

Upvotes: 8

Related Questions