Krzysztof Żuraw Blog

How to dispatch multiple actions based on api call in redux-observable

May 11, 2018

Problem

In my work a have a task - when one of the actions in redux-observable is completed I wanted to dispatch another set of actions. In other words, one action is triggering dispatching of another one.

Solution

const sampleEpic: Epic<RootAction, RootState> = (action$, store) =>
  action$.filter(isActionOf(myTriggerAction)).switchMap(action =>
    Observable.from(apiRequest(action.id))
      .switchMap(res =>
        Observable.concat(
          Observable.of(firstTriggeredAction),
          Observable.of(secondTriggeredAction)
        )
      )
      .catch(({ message, stack }) => Observable.of(errorAction))
  )

At the beginning of this snippet I filtering stream of actions in order to pick only those that I’m interested in. After that, I perform apiRequest and cast in to be Observable. - standard way.

In the next switchMap I concat the 2 streams of observables - each one which it’s own action into one stream. Using this technique I can right now dispatch a bunch of actions based on one api call.

This is it for today! I was a quick blog post but you can email me with your feedback.

Tagged with rxjs redux react javascript redux-observable typescript
Want a monthly digest of these blog posts?

I turned off Disqus comments. If you want to give me feedback please write to krzysztofzuraw(at)fastmail.com or use Keybase.


Krzysztof ŻurawDelivered by Krzysztof Żuraw. Opinions are my own. You can follow updates via RSS feed.