Uncaught Error:Reducer may not dispatch actions

发布于 / 技术教程

前言

使用React写需求已经有段时间了,中间大大小小遇到了不少问题,多数自己百度、Googled的话都能勉强应付过去,其中实在有不懂的地方还加了不少的学习交流群向大佬们求教。今天常规使用dva去写需求的时候遇到了个问题百度了好久没有答案,然后自己跟着报错的信息总算是找到了问题的源头。

错误

下面是报错的截图
image
错误其实已经很明显了Uncaught Error:Reducer may not dispatch actions。报错提示在createStore.js:160行处,这是redux的源码创建store对象的地方,心想难不成还要去研究源码不成。

createStore.js

下面是报错内容的上下文


let currentReducer = reducer let currentState = preloadedState let currentListeners = [] let nextListeners = currentListeners let isDispatching = false function dispatch(action) { if (!isPlainObject(action)) { throw new Error( 'Actions must be plain objects. ' + 'Use custom middleware for async actions.' ) } if (typeof action.type === 'undefined') { throw new Error( 'Actions may not have an undefined "type" property. ' + 'Have you misspelled a constant?' ) } if (isDispatching) { throw new Error('Reducers may not dispatch actions.') } try { isDispatching = true currentState = currentReducer(currentState, action) } finally { isDispatching = false } const listeners = (currentListeners = nextListeners) for (let i = 0; i < listeners.length; i++) { const listener = listeners[i] listener() } return action }

可以看到报错的具体代码是

if (isDispatching) {
    throw new Error('Reducers may not dispatch actions.')
}

isDispatchingtrue的时候会抛出这个错误,然后可以看到当每dispatch的时候会走下面tryisDispatching置为true通过currentReduceraction,更新当前的store tree,只有在finally才会将isDispatching置为false,所以当再次dispatch的时候,因为该状态还是true,故抛出了这个错误。结合自己错误的使用场景,发现好像确实如此,自己一方面在某个回调函数里不停的dispatch,然后中间进行了其他dispatch的操作引发了该错误。

原因

上网百度了这个isDispatching这个全局状态的意义,网上给出的解释是:

使用了全局定义的isDispatching用于给变更中的store tree加锁;即:只有当本次store tree变更完毕后,才允许执行下一次变更,避免store tree响应多个变更时,结果不同步的问题;但事实上,这种写法也决定了,目前的store tree只能响应同步变更(异步变更需要通过添加中间件实现)

总结

问题总是会有的,遇到没见过的问题要学会百度(面向百度搬砖),为了更好的搬砖也不能畏惧redux之类的源码,要学会试着阅读。

本文采用 CC BY-NC-SA 3.0 Unported 协议进行许可
本文链接: https://www.ahwgs.cn/reducer-may-not-dispatch-actions.html