Krzysztof Żuraw blog

How to update progress of long request with redux-observable

May 19, 2018

Problem

I want to send a couple of requests an update a progress after each one is successful. In the end, I want to dispatch success action.

Solution

const epic = action$ =>
  action$.filter(action.fetchRequestStart).switchMap(action =>
    Observable.range(1, repeatTimes)
      .mergeMap(() =>
        Observable.from(fetchRequest).mergeMapTo(
          Observable.of(action.increaseProgress())
        )
      )
      .concat(Observable.of(action.fetchRequestSuccess()))
      .catch(action => Observable.of(action.fetchRequestError()))
  )

This is a simple epic implementing this logic. How does it work? After I filter out the action that is interesting for me from a stream, I map through it using switchMap so if user action dispatches the same action one more time during Observable.range the pending operation will be canceled.

Operator range works like intended - it will emit as many observables as I provide in repeatTimes. Right after that, I’m using mergeMap so I can add multiple observables - in my case, I only add one to dispatch action of increasingProgress. In the end, I use concat to emit action of success at the end of range. If anything goes wrong I catch errors in catch.

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


Want to get blog posts via email?

Powered by Buttondown.


Krzysztof Żuraw

Written by Krzysztof Żuraw who lives and works in Wrocław. About page.