叙事詩のオブザーバブルストリームの開始時と終了時にアクションを放出するベストプラクティスアプローチ？

Question

私は、アプリケーションでAJAX呼び出しをオーケストレーションするために反応を観測可能にしています。私はreact-redux-loading-barに接続して、AJAX呼び出しが開始されたときにローディングバーを表示し、終了すると非表示にします。それは動作しますが、それは非常に 'きれいに'感じません。

RXJSまたはredux-observableを利用してこのクリーナーを作成するより良い方法はありますか？

import Rx from "rxjs"; 
import {combineEpics} from "redux-observable"; 
import client from "../../integration/rest/client"; 

import {showLoading, hideLoading} from 'react-redux-loading-bar' 

import * as types from "./actionTypes"; 
import * as actions from "./actions"; 

const fetchEpic = action$ => 
    action$.ofType(types.FETCH) 
     .mergeMap(action => 
      Rx.Observable.of(showLoading()).merge(
       client({method: 'GET', path: '/api'}) 
        .mergeMap(payload => Rx.Observable.of(actions.fetchSuccess(payload), hideLoading())) 
        .catch(error => Rx.Observable.of(actions.fetchFailure(error), hideLoading())) 
      ) 
     ); 

export default combineEpics(fetchEpic); 

UPDATE：

私はと満足している簡易版を添付しました連結を使用してのマーティンの提案を検討していた後。

import Rx from "rxjs"; 
import {combineEpics} from "redux-observable"; 
import client from "../../integration/rest/client"; 

import {showLoading, hideLoading} from 'react-redux-loading-bar' 

import * as types from "./actionTypes"; 
import * as actions from "./actions"; 

const fetchEpic = action$ => 
    action$.ofType(types.FETCH) 
     .mergeMap(action => 
      Rx.Observable.merge(
       Rx.Observable.of(showLoading()), 
       client({method: 'GET', path: '/api'}) 
        .map(payload => actions.fetchSuccess(payload)) 
        .catch(error => Rx.Observable.of(actions.fetchFailure(error))) 
        .concat(Rx.Observable.of(hideLoading())) 
      ) 
     ); 

export default combineEpics(fetchEpic); 

Answer 1

まあ、私はredux-observableを使ったことがないが、私はあなたが彼らのコールバックに渡された値で作業していないので、あなたがそれらを必要としませんが、あなたは非常に多くのmerge電話を持っていると思います。

const fetchEpic = action$ => 
    action$.ofType(types.FETCH) 
     .startWith(showLoading()) 
     .concat(client({method: 'GET', path: '/api'}) 
      .concatMap(payload => Rx.Observable.of(actions.fetchSuccess(payload))) 
      .catch(error => Rx.Observable.of(actions.fetchFailure(error))) 
     ) 
     .concat(Rx.Observable.of(hideLoading()) 
    ); 

私はactions.fetchSuccess(payload)またはactions.fetchFailure(error)ので、私は彼らが彼らのfetch*をdispite（観測を返さないと仮定かわからない：それはあなたが順番にObseravblesから値を発するようにしたい明らかですので、私は個人的にusign concatを好みます接頭辞）。

また、実際にshowLoading()とhideLoading()の戻り値とチェーンの一部が必要ですか？