在 Redux 和 React 中处理错误的最佳实践

IT技术 javascript reactjs redux react-redux
2021-05-04 16:23:56

我的 redux 操作中有一个异步函数,它在我的减速器中返回一个像这样的对象:

{
user: {},
fetching: false,
fetched, false,
error: null
}

所以基本上当我开始调用异步函数时,我将 redux 状态更新为fetching: true,如果结果成功实现fetched:truefetching:false
那么我使用 react-redux 中的 connect 将 redux 状态映射到 props,并在我的组件的渲染函数中添加了这个:

if(this.props.fetched) {
  // Go to next page
}

一旦获取数据,它会自动进入下一页。
但是,我的错误处理有问题。当错误从 null 变为错误时,我如何处理我的react组件上的错误处理。我现在拥有的是:

if(this.props.error != null) {
   // popup error
} 

但是现在我最终遇到的情况是,下次我调用我的操作时,它已经将 this.props.error 分配给了一个错误,并且它不为空,这导致即使没有错误,它也会显示弹出窗口。
我是否必须在每次显示错误时重置它,或者是否有更好的做法来做这件事?

2个回答

您可以使用redux-catch中间件来捕获 Redux 减速器和中间件的错误。

你可以使用类似的东西,

import reduxCatch from 'redux-catch';

function errorHandler(error, getState, lastAction, dispatch) {
    //dispatch ERROR action as you need.
}

const store = createStore(reducer, applyMiddleware(
  reduxCatch(errorHandler)
));

并且,当您收到由redux-catch中间件触发的 ERROR 操作时,显示您的错误弹出窗口。当您关闭弹出窗口时,调度一个将错误重置为 null 的操作,以便在没有要显示的错误时不会显示弹出窗口。

当我关闭模态后,模态继续显示旧错误时,我遇到了类似的问题。在我通过回调获得成功后,我通过调度“resetErrors”操作解决了这个问题。

除了每次都“重置”它之外,我没有遇到更好的解决方案。