如何处理 react/redux 中的请求错误？

Posted 2023-02-22

【中文标题】如何处理 react/redux 中的请求错误？

【英文标题】：How to handle request errors in react/redux?

【发布时间】：2019-01-11 19:38:59

【问题描述】：

我一直在寻找一些有关处理请求错误的解决方案，例如尝试通过 redux 操作登录服务器时出现密码无效错误。

我发现的最强大的解决方案是使用 reducer 来处理错误，而组件根据 reducer 给出的状态显示它的内容。

例子：

我有一个 reducer 属性“emailNotValidated”，如果服务器响应用户电子邮件尚未验证，则该属性为真，然后我的组件将显示略有不同，并带有重新发送验证电子邮件等选项。

问题是：如果用户离开登录页面然后返回到它怎么办？我不希望他/她找到验证选项，因为我希望“更新”登录页面。每次打开这个组件/页面时，我是否必须调度和操作来“重置”这个减速器？

【问题讨论】：

您是否在给定组件之外使用数据？如果不是，为什么不直接使用状态？

没有。我应该只在操作中调用回调来警告登录组件有关错误而不是调度错误操作吗？

【参考方案1】：

假设您有一个包含多个模块的 React 项目，主要用于：

用户 博客 评论

在您的操作中，您可以执行以下操作：

// actions/user.js
export const userMessageError = (payload, message) => 
    type: 'USER_ERR_MESSAGE',
    error: 
       message,
       payload
    ,

您实际上可以在每个模块的 reducer 中放置一些错误处理案例，如下所示：

// reducer/user.js

case 'USER_ERR_MESSAGE':
// You might want to set the request payload and the error message
// to the state in order for you to actually know what's going on
//
// Then you could have a toast or a modal in the container or inside
// your component to actually display the actual error message

这样做，您实际上可以知道哪个模块返回错误，有效负载是什么以及实际得到错误消息。

您可能不需要返回有效负载，但这完全取决于您和您的偏好。