redux原始碼解析

關於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原始碼解析

redux原始碼解析

相關推薦