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

Question

我的 redux 操作中有一个异步函数，它 returns 在我的 reducer 中有一个这样的对象：

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

所以基本上，当我开始调用异步函数时，我将 redux 状态更新为 fetching: true，如果结果成功实现，则 fetched:true 和 fetching:false
因此，我在 react-redux 中使用 connect 将 redux 状态映射到 props，并将其添加到组件的渲染函数中：

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

一旦获取数据，它会自动转到下一页。
但是，我的错误处理有问题。当错误从 null 变为错误时，我该如何处理我的反应组件上的错误处理。我现在拥有的是：

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

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

Answer 1

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

除了每次 "reseting" 之外，我还没有遇到更好的解决方案。

Answer 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 的操作，以便在没有要显示的错误时不会显示弹出窗口。

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

Best practice to handle errors in Redux and React

javascript

reactjs

redux

react-redux