React-Redux错误页面管理

时间:2016-05-17 19:21:00

标签: javascript reactjs error-handling redux

我们有一个react-redux项目,我们正在尝试设置错误传播和错误页面显示机制。

到目前为止我们所做的是:当异步api调用或其他地方发生错误时,我们会触发一个操作并修改根级别组件App。在根级别reducer中,我们将错误字段设置为传播错误的状态。当观察到错误时,我们呈现错误页面而不是我们拥有的内容。

所以流程如下:组件A - >动作 - > App Reducer - >应用程序组件 - 呈现errorPage。

但问题是状态仍然是错误组件。并且当错误字段保持在状态时,应用程序继续呈现错误页面。我们基本上需要一种机制,以便每当用户触发新操作或每当呈现错误页面时,都会将状态中的错误字段重置为{}。

我们找不到解决这个问题的好方法。它看起来像是一个人们可能曾经面对过的非常普遍的一个。一般来说,我们如何处理异步错误传播并相应地显示错误页面。

2 个答案:

答案 0 :(得分:2)

此问题的正确解决方法是使用:

componentWillUnmount() {
    this.props.handleErrorReset();
}

handleErrorReset函数基本上会触发一个动作,触发错误状态中错误值的重置,这符合以下内容:

const clearErrorState = (state) => state.set('error', fromJS({}));

componentWillUnmount基本上是在卸载相关组件后立即执行的,因此非常适合重置或清除状态中不再需要的值。

https://facebook.github.io/react/docs/component-specs.html#unmounting-componentwillunmount

答案 1 :(得分:1)

如果您正在使用路由系统,例如react-router,您可以实现显示reducer错误的错误页面,并且您可以使用任何其他页面来删除reducer中可能存在的错误。