建站
咨詢
售后
建站咨詢
新聞中心
日益忙碌的一周又過去了，是時候開始每周一次的總結(jié)復(fù)盤了，今天筆者就來剖析一下github中star數(shù)15.1k的開源項目redux-thunk。
按需求定制制作可以根據(jù)自己的需求進行定制，成都網(wǎng)站設(shè)計、網(wǎng)站制作構(gòu)思過程中功能建設(shè)理應(yīng)排到主要部位公司成都網(wǎng)站設(shè)計、網(wǎng)站制作的運用實際效果公司網(wǎng)站制作網(wǎng)站建立與制做的實際意義
作為一名React方向的前端工程師，不管是被面試還是面試別人，大部分都會說起redux-thunk的實現(xiàn)原理，因為它非常經(jīng)典且有用，而且代碼量少的感人，只有短短12行代碼，卻能解決React開發(fā)中同一個函數(shù)支持多dispatch和異步action的問題(雖然這完全依賴于redux的中間件機制(Middleware))。
接下來筆者將從：
- Redux的工作機制
- 中間件實現(xiàn)原理
- redux-thunk源碼實現(xiàn)
這三個方面來帶大家徹底掌握redux-thunk源碼，從而對redux有更深入的了解和應(yīng)用。如果大家對react-redux-redux-thunk實戰(zhàn)感興趣的，讀完之后可以移步筆者的《徹底掌握redux》之開發(fā)一個任務(wù)管理平臺
正文
在解讀Redux-thunk源碼之前我們需要先掌握redux的基本工作機制和中間件實現(xiàn)原理，這樣才能更好的理解源碼背后的奧義。長話短說我們先來看看redux的幾個核心api及其作用：
redux解決的真正問題是React組件間的狀態(tài)共享和狀態(tài)管理問題，通過以上的6個核心api我們便能管理復(fù)雜的狀態(tài)，并能監(jiān)聽和追溯狀態(tài)的改動。機制筆者總結(jié)如下：
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，在調(diào)用時只需要執(zhí)行Actions.start()即可，我們也知道action返回的是一個標(biāo)準(zhǔn)的對象，但我們可以在return之前做一些side effect。這里我們并不能在action中處理異步邏輯，這也是redux-thunk的價值之一，即解決異步調(diào)用action。
到這一步我們?nèi)匀徊荒苤苯舆M入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后的調(diào)用結(jié)果。接下來在dispatch這段代碼中出現(xiàn)了compose函數(shù)， 熟悉函數(shù)式編程的朋友不難猜到其內(nèi)部肯定是實現(xiàn)批處理chain的函數(shù)，并將store.dispatch泵送至其內(nèi)部。上面源碼分析后我們知道每一次執(zhí)行dispatch時，都會先經(jīng)過middleware的“洗禮”。
我們再來看看compose函數(shù)的內(nèi)部實現(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ù)返回的結(jié)果傳給下一個函數(shù)參數(shù)，以此來實現(xiàn)之間的參數(shù)共享和傳遞，非常經(jīng)典的設(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í)行之前已經(jīng)調(diào)用了兩層middleware，此時我們可以解剖一下createThunkMiddleware，在第一次調(diào)用createThunkMiddleware是在chain階段，即上面源碼分析的：
所以這里的next也就是第二次調(diào)用時的store.dispatch, 為了實現(xiàn)同一函數(shù)內(nèi)能執(zhí)行多次dispatch，我們會判斷如果action為函數(shù)，則執(zhí)行action本身并把必要參數(shù)傳遞給它，否則則直接觸發(fā)dispatch，這樣我們就實現(xiàn)了支持action為函數(shù)并且支持異步多dispatch的功能了，讀到這還是非常感嘆其設(shè)計的優(yōu)雅和簡潔，不經(jīng)讓筆者感嘆：學(xué)好函數(shù)式，走遍天下都不怕!
最后筆者準(zhǔn)備了一個基于React+redux+redux-thunk的實戰(zhàn)項目，github地址：
https://github.com/MrXujiang/redux_OA
感興趣的可以學(xué)習(xí)參考一下。
最后
如果想學(xué)習(xí)更多H5游戲, webpack，node，gulp，css3，javascript，nodeJS，canvas數(shù)據(jù)可視化等前端知識和實戰(zhàn)，歡迎在公號《趣談前端》加入我們的技術(shù)群一起學(xué)習(xí)討論，共同探索前端的邊界。
本文轉(zhuǎn)載自微信公眾號「趣談前端」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系趣談前端公眾號。
網(wǎng)站題目：深度剖析Github上15.1kStar項目：Redux-Thunk
URL分享：http://m.5511xx.com/article/cdhhdps.html
