Prevent redux from cancelling actions

Question

I'm using redux with redux-angular. My usecase is to fetch data in two steps:

1. Fetch user courses
2. For each course download the progress

I've tried several ways, always with the same effect. Only the last progress is being downloaded, the rest are cancelled.

I've reduced the example to a minimum:

this.userCoursesActions.fetchCourseProgress('java');
this.userCoursesActions.fetchCourseProgress('tj');
this.userCoursesActions.fetchCourseProgress('spring');

The function looks like this:

fetchCourseProgress(url: string) {
    return this.ngRedux.dispatch({type: UserCourses/FETCH_USER_COURSE_PROGRESS + '/' + url, payload: {url}})
}

I've thought there might be only one action of given type at one time, so the action type is now different for each course.

I end up with the following network activity:

I doubt at this moment that this is relevant, but here is the epic code:

  private createUserCourseProgressEpic() {
    return action$ => action$
      .pipe(
        filter((data: any) => {
          console.log('filter', data.type);
          return data.type.startsWith(TYPES.FETCH_USER_COURSE_PROGRESS);
        }),
        switchMap(({ payload }) => this.getUserProgressForCourseUrl(payload.url)
          .pipe(
            map(progress => this.actions.fetchCourseProgressSuccess( progress, payload.url)),
            catchError(error => {
              console.log('errorrr');
              this.logError(error);
              return of(this.actions.fetchCourseProgressFail(error));
            }),
          )
        )
      );
  }

So basically there seems to be a mechanism for canceling actions, but I have no idea how to disable it.

Answer 1

Ok, found it. It was the switchMap operator inside epic. ‍♂️ I've changed it to mergeMap which doesn't cancel the previous call.