sequencing epics in redux

Question

I have two epics, epicA and epicB.

B is subject to back-pressure since the api calls associated with it are slower. (uploads)

However, I need to make sure that all of the api requests that come from B complete before A.

so if the requests are

B1....A1....B2...B3...

If B1 has not completed by the time that B2 fires, the resolution should be

B1, B2, B3, A1

If B1 completes before B2 is fired, resolution should be

B1, A1, B2, B3

I thought at first that

const bigEpic = epicA.concat(epicB)

would be an answer, but I don't think that makes sense

Another idea:

const bigEpic = action$ => epicA(action$).concat(epicB(action$))

If you reword your question to be just rxjs without redux-observable lingo you should get a lot more answers :) nearly all redux-observable questions are actually just rxjs — jayphelps, Aug 16 '17 at 23:25
Does this boil down to an rxjs question? Since I'm declaring some process hierarchy, I haven't found patterns that resolve two epics this way. — Anthony Chung, Aug 16 '17 at 23:41

score 1 · Accepted Answer · answered Jan 12 '18 at 02:03

You can use Observable.merge for sequencing actions.

const fetchFirst = () =>
  (action, store) => Observable.ajax('/first');

const fetchSecond = () =>
  (action, store) => Observable.ajax('/second');

const fetchBoth = () =>
  (action, store) =>
    Observable.merge(
      fetchFirst()(action, store),
      fetchSecond()(action, store),
   )

sequencing epics in redux

1 Answers1