使用 redux-observable 执行 XHR 然后分派 success/failure

Question

将基于 redux-thunk 构建的大型代码库移至 redux-observable，并且正在努力弄清楚史诗的语义：

监听 LOAD 动作
执行 XHR
调度适当的 SUCCESS 或 FAILURE 操作

这是我目前得到的：

export function editEpic(action$, unusedStore, { xhrClient }) {
  return action$
    .ofType(LOAD_ACTION)
    .map(({ apiParams, operationId }) => {
      // xhrClient is an object with methods on it that
      // return a Promise of the data
      const editOperation = xhrClient[operationId];

      // call the api now
      return editOperation(apiParams);
    })
    .map(result => {
      return { type: SUCCESS_ACTION, result };
    })
    .catch(error => {
      // We never get here..
      return { type: FAILURE_ACTION, error };
    });
}

这在 API 调用成功时工作得很好，但是如果 Promise 因错误而拒绝，则永远不会调用 catch 操作。

有人能给我指出正确的方向吗？我们正在使用：

redux-observable@0.18.0
rxjs@5.5.11

Answer 1

我认为问题在于第一个 .map 应该改为 .switchMap、.concatMap 或 .mergeMap。要验证这一点，请在成功案例中添加一条日志语句以查看 result 等于什么，我希望您会看到它是一个承诺，而不是承诺解析的值。此外，承诺将处于待定状态；还没有 resolved/rejected.

如果多个 LOAD_ACTION 在第一个完成之前快速连续启动，那么选择 switch vs concat vs merge 将取决于你想做什么。 Switch 将取消第一个以支持新的； concat 将等待第一个完成，然后再继续第二个； merge 将以任何可能的顺序执行它们，但不保证结果的顺序。

使用 redux-observable 执行 XHR 然后分派 success/failure

Using redux-observable to perform XHR then dispatch success/failure

rxjs

reactjs

redux

redux-observable