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

我正在嘗試編寫Epic for redux-observable。但我有一個問題（如何在ajax請求之前和之後使redux-observable發送多個動作？

ON_EMPTY_FORM_STATE動作執行.map(response => formSavedAction(response))之前執行

如何解決它基本上我想獲得的是：？

捕捉FORM_SEND行動
發送帶有效負載的Ajax請求
如果我從服務器獲得200響應，然後執行formSavedAction(response)
，如果我得到500錯誤，那麼派遣{ type: ON_FORM_SUBMIT_ERROR }
末（無論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 }) })

問題是那個動作{ type: EMPTY_FORM_STATE }被調度了之前而不是AJAX請求之後。

有什麼辦法解決這個問題嗎？

來源

2017-08-28 user2397623

只是刪除'.do'塊並將'$ store.dispatch（{type：EMPTY_FORM_STATE}）'添加到'.then'和'.catch'兩種情況下 –

不工作....我得到錯誤 TypeError：action $ .ofType（...）。mergeMap（...）。map（...）。然後不是函數 – user2397623

我可以知道爲什麼你用'.map'代替'.then'你的代碼？和你使用的是什麼HTTP庫？ –

可重複觀察的作品的方式是由史詩功能返回的可觀察事物在中間件中訂閱。由於訂閱功能只是：action => store.dispatch(action)

因爲您直接在您的史詩中使用store.dispatch，所以您會繞過可觀察到的事件，並按照您期望的順序調度事件。

要發出的順序，你期待你能做到這一點的動作：

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

來源

2017-08-28 22:29:01 meticoeus

是的 - 請請不要使用store.dispatch https://github.com/redux-observable/redux-observable/issues/314 – jayphelps

我試圖處理史詩你的方式，但有些奇怪的事情正在進行。它看起來像actions .map（response => formSavedAction（response））和mergeMap（action => Rx.Observable.from（action $，{type：ON_EMPTY_FORM_STATE}））從來沒有執行過......我向減速器添加了一些日誌記錄，並且完全沒有任何顯示。 – user2397623

修正了最後一個mergeMap中的錯誤;需要使用，而不是從。嘗試使用.do（console.log）語句登錄史詩。如果它沒有超過Ajax請求，那麼可能存在問題。 – meticoeus

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) 
));

來源

2017-08-29 13:55:50 user2397623

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是行動的創造者。

來源

2018-02-09 14:40:57 bitsthatmatter

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

回答

相關問題