1

I have a ReactJS & Redux application, and using RxJS for async AJAX with cancellation and error handling. The middleware (for Redux) I am using to connect Redux and RxJS is redux-observable.

I am having a request to the server which also handles errors and cancellation, this is the epic:

const RecipesEpic = action$ =>
action$.ofType(FETCH_RECIPES)
    .mergeMap(action => {
        return Observable.ajax({
            method: "get",
            url: url
        })
            .map(payload => {
                return ({ type: FETCH_RECIPES_FULFILLED, payload })
            })
            .catch(error => Observable.of({
                type: FETCH_RECIPES_REJECTED,
                payload: error
            }))
            .takeUntil(action$.ofType(FETCH_RECIPES_CANCELLED))
    })

export default RecipesEpic

I'm trying to implement a loading indicator, first I want to log to the console how many percents completed of the request (by using XHR2), and then I will implement the UI. In simple words: How to implement XHR2 download progress in RxJS DOM Request?

I didn't find any resources online about this question, and I hope other people who are searching for this question will have an answer.

Thank you!

shabenda
  • 1,759
  • 3
  • 14
  • 23

1 Answers1

0

According to The RxJS Ajax Documentation you can supply a progressObserver in your Observable.ajax call. The Observer you supply will be updated with the XHR2 download progress!

Matt Furden
  • 29
  • 1
  • 4