crateStore里面判断是否传入了applyMiddleWare，如果传入了就返回执行后的applyMiddleWare，里面传入createStore,reduce。内部执行creaStore(reduce)获取到state返回。 applyMiddleWare里面传入的中间件依次执行返回加强dispatch

compose

function f1(arg) {
  console.log("f1", arg);
  return arg;
}

function f2(arg) {
  console.log("f2", arg);
  return arg;
}

function f3(arg) {
  console.log("f3", arg);
  return arg;
}

function compose(...funs) {
  if (funs.length === 0) {
    return (arg) => arg;
  }
  if (funs.length === 1) {
    return funs[0];
  }
  return funs.reduce(
    (a, b) =>
      (arg) =>
        a(b(arg))
  );
}

const res = compose(f1, f2, f3)("omg");

applyMiddleware

先将函数本身当成参数传进去，再在enhancer里执行，这样就可以操作中间件 createStore(reduce,enhancer){ if(enhancer){ return enhancer(createStore)(reduce) } }

1.获取store，开始加强dipatch

export default function applyMiddleware(...middlewares){
    return (createStore) => {
        return (reducer) => {
            const store = createStore(reducer)
            return {
                ...store,
                //加强版dispatch
                dispatch
            }
        }
    }
}

2.因为异步的dispatch里面参数是个函数 （dispatch,getStore）=> {dispatch({type:''})}

            let dispatch = store.dispatch
            const middlAPI = {
                getState : store.getState,
                //中间件调用的加强版的不是原版的
                dispatch:(actions,...args) => dispatch(actions,...args)
            }

3.挨个调用中间件就行了

import compose from "./compose"

export default function applyMiddleware(...middlewares){
    return (createStore) => {
        return (reducer) => {
            const store = createStore(reducer)
            let dispatch = store.dispatch
            const middlAPI = {
                getState : store.getState,
                   //中间件调用的加强版的不是原版的
                dispatch:(actions,...args) => dispatch(actions,...args)
            }

            //中间件数组
            const middlewareChain = middlewares.map(i => i(middlAPI))
            //挨个调用中间件
            dispatch = compose(...middlewareChain)(store.dispatch)

            return {
                ...store,
                //加强版dispatch
                dispatch
            }
        }
    }
}

logger

export default function logger({getState,dispatch}){
    //next:store.dispatch
    //next => 加强版dispatch
    //next=>fn,这个fn作为thunk的参数因此这个action就是从thunk里拿的
    return next => (action)=>{
        console.log('----------------------------------');
        console.log('action:',action);
        const preState = getState()
        console.log('preState:',preState);
        const returnValue = next(action);
        const nextState = getState();
        console.log('nextState:',nextState);
        console.log('----------------------------------');
        return returnValue
    }
}

thunk

export default function thunk({getState,dispatch}){
    //这个next就是logger返回的fn
    return next => (action) => {
        if(typeof action === 'function'){
            return action(dispatch,getState)
        }
        return next(action)
    }
}