在 redux 中处理异步操作错误的最佳实践是啥？

Posted 2023-02-22

【中文标题】在 redux 中处理异步操作错误的最佳实践是啥？

【英文标题】：What is the best practice for handling async action errors in redux?在 redux 中处理异步操作错误的最佳实践是什么？

【发布时间】：2019-01-04 00:31:10

【问题描述】：

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 炸弹，我需要在调度操作时添加这个虚拟捕获，恕我直言，这有点难看。

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

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

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

【问题讨论】：

我会派出并扔掉。就像你说的，其他功能可以依赖它来解决。空的catch很尴尬，你为什么还需要它？所以错误没有显示在控制台中？

@JohanP 没有空的 catch create-react-app 炸弹（显示错误页面）。如果它只是默默地显示在控制台中，我会很好的。

啊，我明白了。在你的函数中遇到错误时调度，为什么在handleSubmitClick 出现错误时不必调度？

@JohanP 我不确定我是否理解这个问题。我发送了一个 saveSomething 操作，这将发送一个错误，reducer 将使用该错误来更改状态。所以，在这种情况下，我对失败的承诺处理程序没有用处。但是，解决它似乎有点不对。

为什么您的.catch(e=> 中不需要dispatch( type: THING_SAVE_ERROR, error: e, );？

【参考方案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 产生异常，错误动作调度器将被执行。

【讨论】：

这是有道理的。我觉得很奇怪，在发生错误的情况下，调用 saveSomething 成功处理程序而不是失败或捕获处理程序，但在这种情况下，我并没有真正使用它们，所以我想我的抱怨不是哲学上的实用。