React Redux错误页面管理



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

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

因此流程类似于:组件A->A操作->App Reducer->App组件-渲染错误页面。

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

我们找不到解决这个问题的好方法。这看起来是一个非常常见的问题,任何人以前都可能遇到过。一般来说,我们如何处理异步错误传播并相应地显示错误页面。

这个问题的正确解决方案是使用:

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

handleErrorReset函数基本上会触发一个动作,在错误状态下触发错误值的重置,与此一致:

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

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

https://facebook.github.io/react/docs/component-specs.html#unmounting-组件将卸载

如果您使用的是路由系统,如react router,您可以实现一个显示reducer错误的错误页面),并且您可以使用任何其他页面来删除reducer中潜在的现有错误。

最新更新