redux 中的middleware思想還是很巧妙地，先來看下怎么使用

export default function createStore(initialState = {}) {
  const middleware = [thunkMiddleware, promiseMiddleware, messageMiddleware];
  let finalCreateStore;
  finalCreateStore = applyMiddleware(...middleware)(_createStore);
  const store = finalCreateStore(reducer, initialState);
  return store;
}

就是將middleware 使用applymiddleware函數(shù)包裝一下，再將store傳遞過去即可，使用起來很簡(jiǎn)單，那么關(guān)鍵就是這個(gè)applymiddleware函數(shù)了，這個(gè)函數(shù)式redux提供的，先來看下源碼：

export default function applyMiddleware(...middlewares) {
  return (createStore) => (reducer, preloadedState, enhancer) => {
    const store = createStore(reducer, preloadedState, enhancer)
    let dispatch = store.dispatch
    let chain = []

    const middlewareAPI = {
      getState: store.getState,
      dispatch: (action) => dispatch(action)
    }

    // 依次調(diào)用傳進(jìn)來的middleware 并且調(diào)用middleware  傳入 middlewareAPI
    chain = middlewares.map(middleware => middleware(middlewareAPI))

    //依次調(diào)用傳入了middlewareAPI 的 middleware集合 再傳入一個(gè)dispatch 再返回
    dispatch = compose(...chain)(store.dispatch)

    return {
      ...store,
      dispatch
    }
  }
}


export default function compose(...funcs) {
  if (funcs.length === 0) {
    return arg => arg
  }

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

  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

可能上面有注釋這兩句看起來有點(diǎn)暈， 其實(shí)多看幾次就明白了。這里用了componse函數(shù)，在下面也有給出。
applymiddleware函數(shù)我們看完了， 那么middleware我們?cè)趺磥韺懩?？這里給出一個(gè)例子，就是著名的redux-thunk的代碼，這么著名的第三方庫實(shí)際上只有那么幾行。

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }

    return next(action);
  };
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;

這里面有連續(xù)三個(gè)=> 看起來更暈了。哈哈?？梢苑植紒砜聪?/p>

image.png

applymiddleware中這里面我們調(diào)用了middleware 并且傳入了middlewareAPI 看是不是就是{ dispatch, getState}這個(gè)參數(shù)。

image.png

而這里我們又調(diào)用了一次，并且傳遞了store.dispatch。實(shí)際上就是這里的next參數(shù)。這個(gè)匿名函數(shù)參數(shù)是next，即傳遞過來的store.dispatch。返回了一個(gè)函數(shù)，參數(shù)為action,返回的這個(gè)函數(shù)即一個(gè)store.dispatch。然后我們可以通過根據(jù)這個(gè)action類型來判斷該怎么處理。

函數(shù)很簡(jiǎn)單，設(shè)計(jì)很精妙。讀源碼確實(shí)能學(xué)習(xí)到很多知識(shí)。