我的 redux 操作中有一个异步函数,它在我的 reducer 中返回一个这样的对象:
{
user: {},
fetching: false,
fetched, false,
error: null
}
所以基本上,当我开始调用异步函数时,我将 redux 状态更新为 fetching: true
,如果结果成功完成,则 fetched:true
和 获取:假
因此,我在 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 分配给了一个错误并且它不是 null,这导致它显示弹出窗口,即使没有错误。
我是否必须在每次显示错误时都重新设置错误,或者是否有更好的做法来完成这整件事?
最佳答案
您可以使用 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 的操作,以便在没有要显示的错误时不会显示弹出窗口。
关于javascript - 处理 Redux 和 React 错误的最佳实践,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40837846/