记一次修改框架源码的经历，修改redux使得redux 可以一次处理多个action，并且只发出一次订阅消息

redux是一个数据状态管理的js框架，redux把行为抽象成一个对象，把状态抽象成一个很大的数据结构，每次用户或者其他什么方式需要改变页面都可以理解成对数据状态的改变，根据出发这次改变的不同从而有各式各样的action（行为），如何根据action（行为）来改变状态呢？这时候就需要一个reduce，reduce必须是一个纯函数，reduce是一个定义行为如何改变状态的逻辑处理的函数，action传入通过reduce的逻辑改变状态，最后状态发生改变，发出订阅消息，触发监听函数的执行。思路很简单，看文档也很容易上手，代码量也不大。

但是最近使用redux发现一个问题，如果同时触发多个action的话，会频繁触发监听函数的执行，比如如下代码

(function(){
    dispatch(action1);
    dispatch(action2)
})(dispatch)

　　会触发2次监听函数，一般监听函数回去修改视图，但其实处理完这两次action，在去触发监听函数，用户看到的效果是一样的，不会看到触发第一次action和第二次action之间的过渡，但是如果能一次性把状态跟新完，在触发一次监听函数，那样的话会避免执行一些没必要的代码，例如代码如下：

(function(){
    dispatch(action1,action2);

})(dispatch)

　　但是阅读了redux源码发现，dispatch函数只能接受一个参数，源码如下：

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
  }

　　当然了如果修改源码的会有很多种思路，第一种就是监听还是放到事件队列的尾部执行，如下代码：

var nextTick=(function(){
        let promise = new Promise(function (resolve,rej){
            resolve()
        })
        return function (fn){
            promise.then(fn)
        }
})()

nextTick(listen)

　　这样方式的话，也许会出现队列非常多的话会延迟跟新试图，对用户不友好，最后我采用了最后一个办法，让dispatch函数可以一次处理多个action：

function dispatch(...actions) {

    if (actions.some((action, index, arr) => {
        return !isPlainObject(action)
    })) {
        throw new Error(
            'Actions must be plain objects. ' +
            'Use custom middleware for async actions.'
        )
    }

    // if (!isPlainObject(action)) {
    //     throw new Error(
    //         'Actions must be plain objects. ' +
    //         'Use custom middleware for async actions.'
    //     )
    // }
    if (actions.some((action, index, arr) => {
        return typeof action.type === 'undefined'
    })) {
        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 = actions.reduce(currentReducer, currentState)
        // 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 actions
}