Question

我使用react-observable在我的应用程序中编排AJAX调用。我已经在react-redux-load-bar中连接了当AJAX调用启动时显示加载栏并在完成时隐藏它。它有效，但它感觉不干净＆＃39;。

有没有更好的方法来利用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.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);

更新：

在研究了Martin关于使用concat的建议之后，我附上了一个我很满意的简化版本。

if model1 < int(4):

Answer 1

好吧，我从来没有使用redux-observable，但我认为你有很多merge来电，而你不需要它们，因为你没有使用价值他们传递给他们的回调。我个人更喜欢使用concat，因为很明显你想要按顺序从Obseravbles中发出值：

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)是什么，所以我认为他们不会返回Observables（发送他们的fetch*前缀）。

另外，您真的需要重新发送showLoading()和hideLoading()返回值以及链的一部分吗？

在史诗中可观察的流的开始和结束时发出动作的最佳实践方法？

1 个答案: