redux中间件机制

源码如下：

createStore

export function createStore(reducer, enhancer) {
  if (enhancer) {
    return enhancer(createStore)(reducer)
  }
  let currentState = {}   // 当前状态
  let currentListeners = [] // 响应器（订阅功能）

  function getState() {
    return currentState
  }

  function subscribe(listener) {
    currentListeners.push(listener)
  }

  function dispatch(action) {
    currentState = reducer(currentState, action)
    currentListeners.forEach(v = > v()
  )     //执行所有响应器
    return action
  }

  dispatch({type: '@IMOOC/WONIU-REDUX'})    // 做初始化
  return {getState, subscribe, dispatch}
}

combineReducers

let combineReducers=(renducers)=>{
    //传入一个renducers管理组，返回的是一个renducer
    return function(state={},action={}){
        let newState={};
        for(var attr in renducers){
            newState[attr]=renducers[attr](state[attr],action)
        }
        return newState;
    }
}

applyMiddleware

// 中间件增强器
export function applyMiddleware(...middlewares){
  return createStore=>(...args)=>{ // 返回一个函数 => 此函数里面的函数再接受参数
    // args: enhancer(createStore)(reducer) 传进去的reducer；
    // 此步返回的是createStore的原始功能
    const store = createStore(...args)

    let dispatch = store.dispatch // 导出dispatch部分，增强的就是dispatch

    const midApi = {
      getState:store.getState,
      dispatch:(...args)=>dispatch(...args)
    }

    // 中间件链，在此步执行中间件函数（传递getState和dispatch）
    const middlewareChain = middlewares.map(middleware=>middleware(midApi))

    //compose: 复合函数，目的是将顺序排列的中间件函数包裹起来，前一个函数包裹后一个函数
    dispatch = compose(...middlewareChain)(store.dispatch)
    return {
      ...store,
      dispatch
    }
  }
}

compose

export function compose(...funcs){
  if (funcs.length===0) {
    return arg=>arg // 返回的一个函数，函数接受什么参数就返回什么参数
  }

  if (funcs.length===1) {
    return funcs[0]
  }

  //reduce() 方法接收一个函数作为累加器,reduce 为数组中的每一个元素依次执行回调函数，
  // 不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（上一次回调的返回值），当前元素值，当前索引，原数组

  // 给item传递参数args，item会返回 next()函数 将返回增强的args给pre；会从外往内去执行函数；按递归去理解
  return funcs.reduce((pre, item) => (...args) => pre(item(...args)))
}

补充拓展：
reduce与redux中compose函数
浅析Redux 的 store enhancer