【源碼解析】redux-thunk

simpleapples 發(fā)布于2019-08-21 17:10 / 2209人閱讀

摘要：的返回值是函數(shù)，這個(gè)函數(shù)經(jīng)調(diào)用，傳入?yún)?shù)，之后會(huì)在中間件鏈上進(jìn)行傳遞，只要保證每個(gè)中間件的參數(shù)是并且將傳遞給下一個(gè)中間件。

了解了Redux原理之后，我很好奇Redux中間件是怎么運(yùn)作的，于是選了最常用的redux-thunk進(jìn)行源碼分析。

此次分析用的redux-thunk源碼版本是2.2.0，redux源碼版本是3.7.2。并且需要了解Redux原理

redux中間件都是由redux的applyMiddleware()方法所掛載的

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

    //暴露給中間件的API，所以redux-thunk可以使用形如return (dispatch, getState)=>{}
    const middlewareAPI = {
      getState: store.getState,
      dispatch: (action) => dispatch(action)
    }
    //將暴露的API給中間件，調(diào)用中間件函數(shù)，生成中間件返回值函數(shù)（為什么返回值是函數(shù)？不是函數(shù)下面的compose()就報(bào)錯(cuò)了）
    chain = middlewares.map(middleware => middleware(middlewareAPI))
    //組合全部中間件的返回值函數(shù)， chain是中間件返回值函數(shù)們
    //然后reduce起來的函數(shù)返回的也是函數(shù)，將store原來的dispatch傳進(jìn)去，dispatch函數(shù)也是接受一個(gè)action并返回一個(gè)action，作為中間件鏈的頭部
    dispatch = compose(...chain)(store.dispatch)

    return {
      ...store,
      dispatch
    }
  }
}

可以看到redux主要做了以下事情：

對(duì)中間件們使用map，將dispatch和getState傳遞進(jìn)去

使用compose將中間件組合起來，最后傳入原生的store.dispatch

而compose函數(shù)則是簡(jiǎn)單的將中間件進(jìn)行串聯(lián)調(diào)用

//compose(funcA, funcB, funcC) 等于 (args)=>funcA(funcB(funcC(args)))
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)))
}

最后我們回到redux-thunk

redux-thunk的代碼很短，只有短短14行

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;

它對(duì)外暴露的是const thunk = createThunkMiddleware();，也就是({dispatch, getState})=>{...}這個(gè)函數(shù)。

然后經(jīng)chain = middlewares.map(middleware => middleware(middlewareAPI))傳入dispatch和getState，chain里面是next=>{...}，進(jìn)行compose。

compose(a,b,c)的返回值是函數(shù)(...args)=>a(b(c(...args)))，這個(gè)函數(shù)經(jīng)調(diào)用，傳入?yún)?shù)store.dispatch，之后action會(huì)在中間件鏈上進(jìn)行傳遞，只要保證每個(gè)中間件的參數(shù)是action并且將action傳遞給下一個(gè)中間件。

具體到redux-thunk中，它先檢查action是否是函數(shù)，一般的action都是plain object，如果是函數(shù)就應(yīng)該是由thunk處理。如果不是，傳遞給next，next就是下一個(gè)中間件。

如果是函數(shù)，則調(diào)用這個(gè)函數(shù)并將dispatch, getState, extraArgument傳入。這也就是為什么我們需要將thunk action生成函數(shù)（注意action和action生成函數(shù)的區(qū)別）寫成() => (dispatch, getState) => {...}，傳入redux-thunk的action就是(dispatch, getState)=>{...}這個(gè)函數(shù)