redux-observable - dispatch multiple redux actions in a single epic

Question

I'm looking for way of dispatching multiple redux actions in a single Epic of redux-observable middleware.

Let's assume I have following Epic. Everytime when SEARCH event happens, Epic loads data from backend and dispatches RESULTS_LOADED action.

searchEpic = (action$) => 
    action$
    .ofType('SEARCH')
    .mergeMap(
        Observable
        .fromPromise(searchPromise)
        .map((data) => {
            return {
                type: 'RESULTS_LOADED',
                results: data
            }
        })
    )

Now, let's assume that I need dispatch additional action when the searchPromise is resolved.

The simplest way of doing so seems to have a second epic that will listen to RESULTS_LOADED and dispatch the second action. Like so:

resultsLoadedEpic = (action$) => 
    action$
    .ofType('RESULTS_LOADED')
    .map(({results} => {
         return {
             type: 'MY_OTHER_ACTION',
             results
         } 
    })

In this simple example it's quite easy. But when Epics grow, I tend to find myself having a lot of redux actions which sole purpose is to trigger other actions. Additionally, some of the rxjs code needs to be repeated. I find this a bit ugly.

So, my question: Is there a way to dispatch multiple redux actions in a single Epic?

ngrx/effects implements shortcuts for this for angular2 based applications, I don't know if similar libraries exist for redux-observable? — Jens Habegger, Nov 30 '16 at 13:00

score 58 · Accepted Answer · edited Jan 05 '18 at 21:11

There is no requirement that you make a one-to-one in/out ratio. So you can emit multiple actions using mergeMap (aka flatMap) if you need to:

const loaded = (results) => ({type: 'RESULTS_LOADED', results});
const otherAction = (results) => ({type: 'MY_OTHER_ACTION', results});

searchEpic = (action$) => 
    action$
    .ofType('SEARCH')
    .mergeMap(
        Observable
        .fromPromise(searchPromise)
        // Flattens this into two events on every search
        .mergeMap((data) => Observable.of(
          loaded(data),
          otherAction(data))
        ))
    )

Note that any Rx operator that accepts an Observable also can accept a Promise, Array, or Iterable; consuming them as-if they were streams. So we could use an array instead for the same effect:

.mergeMap((data) => [loaded(data), otherAction(data)])

Which one you use depends on your personal style preferences and use case.

Should the results variable in the inner arrow function in flatMap not be data? — Davy Kavanagh, Mar 22 '17 at 16:22

Qiang · Answer 2 · 2018-10-24T20:18:57.583

3

Or maybe you have three actions,

API_REQUEST, API_RUNNING, API_SUCCESS,

searchEpic = (action$) => 
action$
.ofType('API_REQUEST')
.mergeMap((action) => {
   return concat(
       of({type: 'API_RUNNING'}),
       Observable.fromPromise(searchPromise)
        .map((data) => {
          return {type: 'API_SUCCESS', data}; 
        }),
    );
});

edited Oct 24 '18 at 20:18

answered Oct 17 '18 at 00:45

Qiang

1,468
15
18

redux-observable - dispatch multiple redux actions in a single epic

2 Answers2

Linked