如何使redux-observable在ajax請求之前和之后發送多個動作？

Question

我正在嘗試為redux-observable編寫Epic。 但是我有一個問題（

在執行.map(response => formSavedAction(response))之前執行ON_EMPTY_FORM_STATE操作。

我該如何解決？ 基本上我想要得到的是：

1. 捕獲FORM_SEND操作
2. 發送帶有有效負載的Ajax請求
3. 如果我從服務器收到200響應，則執行formSavedAction(response)
4. 如果出現500錯誤，請發送{ type: ON_FORM_SUBMIT_ERROR }
5. 最后（無論返回什么Ajax請求），我都希望調度動作{ type: EMPTY_FORM_STATE }

這是我的代碼：

const saveProductEpic = (action$, $store) =>
action$.ofType(SUBMIT_FORM)
    .mergeMap(action => ajax.post('http://localhost:9000/products', action.payload,
        { 'Content-Type': 'application/json' }))
    .map(response => formSavedAction(response))
    .catch(err => { $store.dispatch({ type: ON_FORM_SUBMIT_ERROR }) })
    .do(() => { $store.dispatch({ type: EMPTY_FORM_STATE }) })

問題是，在AJAX請求之前而不是在AJAX請求之后調度了動作{ type: EMPTY_FORM_STATE } 。

有沒有什么辦法解決這一問題？

Answer 1

redux-observable的工作方式是在中間件中預訂由epic函數返回的observable。 您的可觀察對象必須發出redux操作，因為訂閱函數只是： action => store.dispatch(action)

因為您直接在史詩中使用store.dispatch，所以您繞過了redux可觀察的問題，並按期望的順序進行了調度。

要按照期望的順序發出操作，可以執行以下操作：

action$.ofType(SUBMIT_FORM)
  .mergeMap(action => ajax.post('http://localhost:9000/products', action.payload,
    { 'Content-Type': 'application/json' }))
  .map(response => formSavedAction(response))
  // Notice that catch is now returning the value by dropping the brackets.
  .catch(err => Observable.of({ type: ON_FORM_SUBMIT_ERROR }))
  // send whatever action has come through, and add the empty state action after it.
  .mergeMap(action => Observable.of(action, { type: EMPTY_FORM_STATE }))

概念演示： https : //jsbin.com/focujikuse/edit?js,console

Answer 2

const saveProductEpic = (action$, $store) => action$.ofType(SUBMIT_FORM)
.mergeMap((data) => Rx.Observable.concat(
    ajax.post(url, data.payload, params).mergeMap(
        (response) => Rx.Observable.of(formSavedAction(response)) )
        .catch(err => { $store.dispatch({ type: ON_FORM_SUBMIT_ERROR }) }),
    Rx.Observable.of({ type: ON_EMPTY_FORM_STATE })
    .delay(2000)
));

Answer 3

const saveProductEpic = (action$, $store) => action$.ofType(SUBMIT_FORM) .mergeMap(action => ajax.post('http://localhost:9000/products',action.payload, { 'Content-Type': 'application/json' }) .mergeMap(response => Observable.of(formSavedAction(response), emptyFormStateAction())) .catch(err => Observable.of( formSubmitErrorAction(), emptyFormStateAction()) ) );

其中emptyFormStateAction和formSubmitErrorAction是動作創建者。