redux原始碼解析

2021-09-12 17:36:33 字數 3224 閱讀 8539

關於redux的基本概念和工作流如何進行的這裡就不進行過多概述了,可以檢視相關文件去了解。

流程圖鏈結

以下是redux的原始碼結構圖,主要的就是以下幾個檔案組成,我們接下來按順序進行介紹其中原理和實現過程。

首先了解下createstore.js。通過呼叫createstore建立唯一的store,store中暴露出getstate,dispatch,subscribe,replacereducer這幾個方法。通常我們用到的主要是前三個方法,這裡作為主要介紹內容。如下是createstore的主要內容:

export function createstore(reducer, preloadedstate, enhancer) 

if(typeof preloadedstate === 'function' && typeof enhancer === 'undefined')

if(typeof enhancer !== 'undefined')

return enhancer(createstore)(reducer, preloadedstate)

} if(typeof reducer !== 'function')

/*** 初始化引數

*/let currentreducer = reducer //初始化reducer

let currentstate = preloadedstate //初始化state

let currentlisteners = //初始化subscribe監聽函式陣列

let nextlisteners = currentlisteners

let isdispatching = false

/*** 複製乙份currentlisteners,為了防止在dispatch的時候

* 呼叫subscribe和unsubscribe時候發生錯誤

*/function ensurecanmutatenextlisteners()

} /**

* 獲取當前的state

*/function getstate()

return currentstate

} /**

* 訂閱監聽事件,觸發dispatch後執行

*/function subscribe(listener)

if(isdispatching)

let issubscribed = true

ensurecanmutatenextlisteners()

nextlisteners.push(listener)

return function unsubscribe()

if(isdispatching)

issubscribed = false

ensurecanmutatenextlisteners()

const index = nextlisteners.indexof(listener)

nextlisteners.splice(index)

}} /**

* 執行好dispatch迴圈呼叫每個subscribe的函式

*/function dispatch() , action) => , {})}}

export default function createstore(reducer, preloadedstate, enhancer)
const combinereducers = (reducers) => , action) => , {})

}} return (next) =>

//每個中介軟體也是乙個高度柯里化的函式,它接收middlewareapi引數後的第一次返回結果並儲存到chain陣列中

//chain陣列中每一項都是對dispatch的增強,並進行控制權轉移。

chain = middlewares.map(middleware => middleware(middlewareapi))

//這裡的dispatch函式就是增強後的dispatch,因此compose方法接收了chain陣列和原始dispatch方法。

dispatch = compose(...chain, store.dispatch)

return }}

}export default function compose(...funcs)

if(funcs.length === 1)

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

}

這個模組涉及的內容較少,我們直接去看原始碼:

function bindactioncreator(actioncreator, dispatch) 

}

/**

引數說明:

actioncreators: action create函式,可以是乙個單函式,也可以是乙個物件,這個物件的所有元素都是action create函式

dispatch: store.dispatch方法

*/export default function bindactioncreators(actioncreators, dispatch)

// actioncreators必須是函式或者物件中的一種,且不能是null

if (typeof actioncreators !== 'object' || actioncreators === null) . ` +

`did you write "import actioncreators from" instead of "import * as actioncreators from"?`

)} // 獲取所有action create函式的名字

const keys = object.keys(actioncreators)

// 儲存dispatch和action create函式進行繫結之後的集合

const boundactioncreators = {}

for (let i = 0; i < keys.length; i++)

} // 返回繫結之後的物件

/**boundactioncreators的基本形式就是

*/return boundactioncreators

}

Redux原始碼解析

輸出 複製 這些函式會呼叫到閉包裡面的一些變數,如currentstate,currentreducer,currentlisteners。作用 將action和state傳入reducer並修改對應的state,並執行listeners陣列裡面的所有listener 核心就是這句 currents...

redux原始碼解析

關於redux的基本概念和工作流如何進行的這裡就不進行過多概述了,可以檢視相關文件去了解。流程圖鏈結 以下是redux的原始碼結構圖,主要的就是以下幾個檔案組成,我們接下來按順序進行介紹其中原理和實現過程。首先了解下createstore.js。通過呼叫createstore建立唯一的store,s...

redux原始碼解析

關於redux的基本概念和工作流如何進行的這裡就不進行過多概述了,可以檢視相關文件去了解。流程圖鏈結 以下是redux的原始碼結構圖,主要的就是以下幾個檔案組成,我們接下來按順序進行介紹其中原理和實現過程。首先了解下createstore.js。通過呼叫createstore建立唯一的store,s...