redux-observable - dispatch multiple redux actions in a single epic
Solution 1:
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.
Solution 2:
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};
}),
);
});