Question

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

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

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

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

一旦获取数据，它就会自动进入下一页。
但是，我的错误处理有问题。当错误从null更改为error时，如何处理react组件的错误处理。我现在拥有的是：

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

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

Answer 1

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

你可以使用类似的东西，

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

Answer 2

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

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

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

2 个答案: