Uncaught Error:Reducer may not dispatch actions

前言

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

错误

下面是报错的截图

XC_}J`RBLUKLKL7RQ0}31PJ.png

错误其实已经很明显了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.')
}

当isDispatching为true的时候会抛出这个错误，然后可以看到当每dispatch的时候会走下面try将isDispatching置为true通过currentReducer和action，更新当前的store tree,只有在finally才会将isDispatching置为false,所以当再次dispatch的时候，因为该状态还是true,故抛出了这个错误。

原因

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

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

总结

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

原文链接:https://www.ahwgs.cn/reducer-may-not-dispatch-actions.html