javascript - 在 redux 中处理异步操作错误的最佳实践是什么？

Question

export const saveSomething = (thing = {}) => {
  dispatch({
    type: THING_SAVING,
  });

  return async function (dispatch) {
    try {
      await persistThing(thing);
    } catch (e) {
      dispatch({
        type: THING_SAVE_ERROR,
        error: e,
      });
      throw e;
    }

    dispatch({
      type: THING_SAVED,
      error: e,
    });
  }
}

handleSubmitClick(e) {
  dispatch(saveSomething({ name: e.target.value }))
    .catch(e => {
      // pass
    });
}

所以，我可能想多了，但我想在这里找出最佳实践。当我的异步操作出现错误时，即使我正在调度错误，仍然觉得抛出它是正确的，因此如果某些组件想要对此进行键控，则该承诺会被拒绝。但是，这意味着为了在未处理的 promise 拒绝时没有 Create-React-App 炸弹，我需要在调度操作时添加这个虚拟捕获，恕我直言，这有点难看。

这里的最佳做法是什么？不抛出错误？使用假捕捉？还有什么？

编辑：我需要虚拟捕获的原因是因为否则应用程序正在轰炸我，至少在 create-react-app 中：

（错误不是 100% 匹配我的伪代码，但你明白了）

标签： javascriptreduxes6-promiseredux-thunk

Answer 1

在我自己的项目中，我会尝试管理所有错误应用程序，可能使用一些通用动作调度程序，可以使用适当的错误代码进行修改。但是对于您的示例，您可能不想抛出错误，因为您正在使用await可能导致错误的方法。所以我会像这样重写代码：

export const saveSomething = (thing = {}) => {
  dispatch({
    type: THING_SAVING,
  });

  return async function (dispatch) {
    try {
      await persistThing(thing);
      dispatch({
       type: THING_SAVED,
      });
    } catch (e) {
      dispatch({
        type: THING_SAVE_ERROR,
        error: e,
      });
    }
  }
}

如果没有发生任何事情并且一切顺利，那么在异步调用完成后persistThing，动作调度程序将被执行。如果persistThing产生异常，错误动作调度程序将被执行。