如何在我的React应用程序中添加常规错误处理?

时间:2016-10-15 10:25:41

标签: reactjs redux react-redux

我目前正在构建一个React应用程序,它可以进行大量的服务器通信。如果发生服务器错误,我想以一般方式向用户显示错误,例如带有错误消息的叠加层。

使用容器组件

在我的减速机中,我会返回这样的内容:

{ type: "LIST_POSTS_ERROR", loading: false, error: { msg: "An error occurred" } }

显然,我的容器组件是redux意识到的。在render()函数中,我可以检查当前状态是否具有属性error,如果是,我将呈现错误消息。奇怪的是,在每个容器组件中,我都必须检查当前状态,并且可能在每个容器组件中都有重复的代码。

更通用的方法

我在寻找的是一种更通用的方法。知道所有状态的东西,如果当前状态包含错误,则会自动显示错误消息。把它想象成一个错误的拦截器。当然,这个组件不属于路由,所以我想知道这是否可能?

如何在React应用中进行错误处理?我很想知道你的做法!

2 个答案:

答案 0 :(得分:1)

在我的应用中,我发起了一项名为handleError的动作,它会在我的应用中触发toast组件。

您可以在出错时dispatch执行此操作。例如,您可以在dispatch的{​​{1}}中.catch()。{/ p>

答案 1 :(得分:0)

我正在为我的应用尝试类似的东西。因此,在catch或/> = 400响应时触发调度以在状态中设置字符串(您的api响应)并将此值连接到您的组件。

接下来,可能需要4-5秒才能发送一个清除该值的调度,这样您的信息就会消失。您可以在登录屏幕或后API调用中实现此功能。

希望它有所帮助!!!