日益忙碌的一周又過去了，是時候開始每周一次的總結復盤了，今天筆者就來剖析一下github中star數(shù)15.1k的開源項目redux-thunk。

按需求定制制作可以根據自己的需求進行定制，成都網站設計、網站制作構思過程中功能建設理應排到主要部位公司成都網站設計、網站制作的運用實際效果公司網站制作網站建立與制做的實際意義

作為一名React方向的前端工程師，不管是被面試還是面試別人，大部分都會說起redux-thunk的實現(xiàn)原理，因為它非常經典且有用，而且代碼量少的感人，只有短短12行代碼，卻能解決React開發(fā)中同一個函數(shù)支持多dispatch和異步action的問題(雖然這完全依賴于redux的中間件機制(Middleware))。

接下來筆者將從：

• Redux的工作機制
• 中間件實現(xiàn)原理
• redux-thunk源碼實現(xiàn)

這三個方面來帶大家徹底掌握redux-thunk源碼，從而對redux有更深入的了解和應用。如果大家對react-redux-redux-thunk實戰(zhàn)感興趣的，讀完之后可以移步筆者的《徹底掌握redux》之開發(fā)一個任務管理平臺

正文

在解讀Redux-thunk源碼之前我們需要先掌握redux的基本工作機制和中間件實現(xiàn)原理，這樣才能更好的理解源碼背后的奧義。長話短說我們先來看看redux的幾個核心api及其作用：

redux解決的真正問題是React組件間的狀態(tài)共享和狀態(tài)管理問題，通過以上的6個核心api我們便能管理復雜的狀態(tài)，并能監(jiān)聽和追溯狀態(tài)的改動。機制筆者總結如下：

redux工作機理基本了解之后，我們先看看一個實際的例子：

 
 
 
 

  
  
  
  
import actionType from './actionType' 
  
  
  
  
 
  
  
  
  
class Actions { 
  
  
  
  
    static start() { 
  
  
  
  
        return { 
  
  
  
  
            type: actionType.CREATE_TODO_DOING 
  
  
  
  
        } 
  
  
  
  
    } 
  
  
  
  
 
  
  
  
  
    static ok(data, cb) { 
  
  
  
  
        cb && 'function' === typeof cb && cb(data); 
  
  
  
  
        return { 
  
  
  
  
            type: actionType.CREATE_TODO_SUCCESS, 
  
  
  
  
            payload: data 
  
  
  
  
        } 
  
  
  
  
    } 
  
  
  
  
 
  
  
  
  
    static fail(data, cb) { 
  
  
  
  
        cb && 'function' === typeof cb && cb(data); 
  
  
  
  
        return { 
  
  
  
  
            type: actionType.CREATE_TODO_FAILURE, 
  
  
  
  
            payload: data 
  
  
  
  
        } 
  
  
  
  
    } 
  
  
  
  
} 
 
 
 
 

以上代碼我們可以發(fā)現(xiàn)我們用了一個統(tǒng)一的createAction來創(chuàng)建action，在調用時只需要執(zhí)行Actions.start()即可，我們也知道action返回的是一個標準的對象，但我們可以在return之前做一些side effect。這里我們并不能在action中處理異步邏輯，這也是redux-thunk的價值之一，即解決異步調用action。

到這一步我們仍然不能直接進入redux-thunk的源碼分析，因為我們還是不清楚如何解決上述步驟，因為我們還沒有了解redux的中間件機制。

redux中間件機制

說到中間件(middleware)，使用過nodejs的人可能會很熟悉，比如說知名的koa中間件，express中間件等，其實中間件筆者的理解是在某個執(zhí)行流中的某個環(huán)節(jié)做一些額外的處理的模塊。實現(xiàn)中間件的機制也很簡單， 就是在框架核心執(zhí)行流中去遍歷外部傳入的中間件，并依次執(zhí)行即可，我們先來看看redux中如何使用中間件的：

 
 
 
 

  
  
  
  
import { createStore, applyMiddleware } from 'redux'; 
  
  
  
  
import reducers from './reducers'; 
  
  
  
  
 
  
  
  
  
const middlewares = applyMiddleware(middleware1, middleware2); 
  
  
  
  
const store = createStore(reducers, middlewares); 
 
 
 
 

所以說redux-thunk是被傳入applyMiddleware方法中作為參數(shù)使用的，不難猜到applyMiddleware方法中一定有遍歷執(zhí)行參數(shù)的邏輯，我們來看看applyMiddleware的核心源碼：

 
 
 
 

  
  
  
  
export default function applyMiddleware(...middlewares) { 
  
  
  
  
    return function enhancer(createStore) { 
  
  
  
  
      return function enhancedCreateStore(...args) { 
  
  
  
  
        const store = createStore(...args) 
  
  
  
  
        let dispatch = () => { 
  
  
  
  
          thrownewError('此處省略n個字...') 
  
  
  
  
        } 
  
  
  
  
 
  
  
  
  
        const middlewareAPI = { 
  
  
  
  
          getState: store.getState, 
  
  
  
  
          dispatch: (...args) => dispatch(...args) 
  
  
  
  
        } 
  
  
  
  
 
  
  
  
  
        const chain = middlewares.map(function(middleware) { 
  
  
  
  
          return middleware(middlewareAPI) 
  
  
  
  
        }) 
  
  
  
  
 
  
  
  
  
        dispatch = compose(...chain)(store.dispatch) 
  
  
  
  
        return { 
  
  
  
  
          ...store, 
  
  
  
  
          dispatch, 
  
  
  
  
        } 
  
  
  
  
     } 
  
  
  
  
  } 
  
  
  
  
} 
 
 
 
 

由上面的源碼可知，在chain這段代碼里我們發(fā)現(xiàn)其存儲的是applyMiddleware方法參數(shù)傳入getState，dispatch后的調用結果。接下來在dispatch這段代碼中出現(xiàn)了compose函數(shù)， 熟悉函數(shù)式編程的朋友不難猜到其內部肯定是實現(xiàn)批處理chain的函數(shù)，并將store.dispatch泵送至其內部。上面源碼分析后我們知道每一次執(zhí)行dispatch時，都會先經過middleware的“洗禮”。

我們再來看看compose函數(shù)的內部實現(xiàn)：

 
 
 
 

  
  
  
  
export default function compose(...funcs) { 
  
  
  
  
  if (funcs.length === 0) { 
  
  
  
  
    return arg => arg 
  
  
  
  
  } 
  
  
  
  
   
  
  
  
  
  if (funcs.length === 1) { 
  
  
  
  
    return funcs[0] 
  
  
  
  
  } 
  
  
  
  
   
  
  
  
  
  return funcs.reduce(function(a, b) { 
  
  
  
  
    return function (...args) { 
  
  
  
  
      return a(b(...args)) 
  
  
  
  
    } 
  
  
  
  
  }) 
  
  
  
  
} 
 
 
 
 

由上面代碼可以看出compose最終返回的是一個函數(shù)，如果參數(shù)大于一時，我們采用reduce將上一個函數(shù)返回的結果傳給下一個函數(shù)參數(shù)，以此來實現(xiàn)之間的參數(shù)共享和傳遞，非常經典的設計。

在掌握了redux中間件實現(xiàn)原理之后， 我們再來看redux-thunk源碼就非常容易理解了。

redux-thunk源碼分析

我們先看看這個github中star數(shù)15.1k的源碼長啥子：

 
 
 
 

  
  
  
  
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; 
 
 
 
 

沒錯， 這就是redux-thunk的全部源碼了，是不是很nice～。在上面的介紹中我們了解到redux中間件機制使得我們可以在中間件中拿到必備的dispatch, getState，并且在執(zhí)行之前已經調用了兩層middleware，此時我們可以解剖一下createThunkMiddleware，在第一次調用createThunkMiddleware是在chain階段，即上面源碼分析的：

所以這里的next也就是第二次調用時的store.dispatch, 為了實現(xiàn)同一函數(shù)內能執(zhí)行多次dispatch，我們會判斷如果action為函數(shù)，則執(zhí)行action本身并把必要參數(shù)傳遞給它，否則則直接觸發(fā)dispatch，這樣我們就實現(xiàn)了支持action為函數(shù)并且支持異步多dispatch的功能了，讀到這還是非常感嘆其設計的優(yōu)雅和簡潔，不經讓筆者感嘆：學好函數(shù)式，走遍天下都不怕!

最后筆者準備了一個基于React+redux+redux-thunk的實戰(zhàn)項目，github地址：

https://github.com/MrXujiang/redux_OA

感興趣的可以學習參考一下。

最后

如果想學習更多H5游戲, webpack，node，gulp，css3，javascript，nodeJS，canvas數(shù)據可視化等前端知識和實戰(zhàn)，歡迎在公號《趣談前端》加入我們的技術群一起學習討論，共同探索前端的邊界。

本文轉載自微信公眾號「趣談前端」，可以通過以下二維碼關注。轉載本文請聯(lián)系趣談前端公眾號。

新聞標題：深度剖析Github上15.1kStar項目：Redux-Thunk
分享URL：http://uogjgqi.cn/article/cdhhdps.html