ReactJS Redux RxJS AJAXローディングインジケータ

Question

私はReactJS & Reduxアプリケーションを使用しています。キャンセルとエラー処理を伴う非同期AJAXにはRxJSを使用しています。私がReduxとRxJSを接続するために使用しているミドルウェア（Redux用）は、還元的に観測可能です。

私もエラーやキャンセルを処理するサーバーに要求を持っています、これは叙事詩です：

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 

私がコンソールにログインする最初のローディングインジケータを実装しようとしています（XHR2を使用して）要求の完了したパーセンテージ数を入力し、UIを実装します。簡単な言葉で：RxJS DOM要求のXHR2ダウンロードの進捗を実装する方法は？

私はこの質問についてオンラインのリソースを見つけられませんでした。この質問を探している他の人にも回答がありますように願っています。

ありがとうございました！

Answer 1

The RxJS Ajax Documentationによれば、Observable.ajaxコールでprogressObserverを指定できます。あなたが提供するObserverは、XHR2のダウンロードの進行状況に合わせて更新されます。