javascript - 如何使 redux-observable 在 ajax 请求之前和之后发送多个操作？

Question

我正在尝试为 redux-observable 编写 Epic。但我遇到了一个问题(

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

我该如何解决这个问题？基本上我想要得到的是:

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

问题在于操作 { type: EMPTY_FORM_STATE } 是在之前调度的 而不是在 AJAX 请求之后。

有什么办法可以解决这个问题吗？

Answer 1

redux-observable的工作方式是在中间件中订阅epic函数返回的observable。您的可观察对象必须发出 redux 操作，因为订阅函数只是: action => store.dispatch(action)

因为您直接在您的史诗中使用 store.dispatch，所以您正在规避 redux-observable 并按照您期望的顺序分派(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