Redux createStore原始碼學習

2021-09-16 21:50:55 字數 2601 閱讀 1333

redux api

export
原始碼結構上面我們看到了redux的api和原始碼結構,看的出來,warning.js和index.js不用解析,都看得懂,關鍵時其餘的幾個module,那我們從最重要的createstore講起。

export var actiontypes = 

//首先定義了乙個action型別,我們知道更新state的唯一方法就是dispatch乙個action,這個action是用

// 來初始化state的,後面會用到它

現在來看下createstore的大體結構

//接收三個引數

//reducer為function。當dispatch乙個action時,此函式接收action來更新state

//preloadstate初始化state

export default function createstore(reducer, preloadedstate, enhancer)

if (typeof enhancer !== 'undefined')

return enhancer(createstore)(reducer, preloadedstate)

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

var currentreducer = reducer

//得到reducer

var currentstate = preloadedstate

//得到初始init,沒有傳遞則為undefined

var currentlisteners =

//定義乙個陣列用來存放listeners。就是乙個函式陣列,當state發生改變時,會迴圈執行這個陣列裡面的函式

var nextlisteners = currentlisteners

//用來儲存下一次的listeners陣列。為什麼要有這個listeners陣列呢?因為當state發生改變時,我們根據

//上面的currentlisteners來迴圈執行函式,但是在這執行這些函式時,函式內部可能取消或者新增訂閱

//(state改變時,新增或者取消執行函式),這時如果直接操作currentlisteners ,相當於在迴圈

//內部修改迴圈條件,執行瞬間就亂套了,有沒有啊,有沒有

var isdispatching = false

//reducer函式是否正在執行的標識

function ensurecanmutatenextlisteners()

function dispatch()

function subscribe()

function getstate()

function replacereducer()

function observable()

dispatch()

//執行dispatch函式,初始化state

return

}

現在是不是感覺明朗(懵逼)了許多,懵逼就對了,接下來我們再來解析一下dispatch, subscribe等函式的具體實現,或許會讓你明朗(更懵逼)起來

看了上面的大體結構,我們明白以下這些就夠了。

createstore是乙個函式,它定義了一些變數(currentstate, currentlisteners等)及函式(dispatch, subscribe等),並且呼叫了dispatch,最後返回乙個物件,該物件包含的就是dispatch和subscribe等函式。接下來我們來解析這些函式。

createstore裡面只呼叫了乙個函式,那就是dispatch,那我們就從這裡開始講起。

dispatch

它是這樣被呼叫的,有沒有很熟悉。。。

dispatch()
來看看dispatch的原始碼

function dispatch(action) 

//同樣是校驗引數,不解釋,相信都能看懂

if (typeof action.type === 'undefined')

//判斷是否正在執行reducers函式,如果正在執行,此action不會觸發,那有人就問題了,那是不是我

//的dispatch不會起作用,導致state沒有更新,資料是錯誤的? 答案是state是不會有錯。因為redux本

//身整個更新state的過程是同步的,從dipatch——>reducers——>state。所以這段**意在你定義的

//reducers函式中不允許呼叫dispatch

if (isdispatching)

try finally

//呼叫所有訂閱state改變的函式,這些函式就可以通過getstate函式獲取到最新的state值。訂閱的函式

//從**來呢,從subscribe中來, 我們後面來解析subscribe和getstate

var listeners = currentlisteners = nextlisteners

for (var i = 0; i < listeners.length; i++)

return action

}

pytorch geometric 原始碼學習

作者大神真的太屌了,膜拜,工程實現能力太強了 本文希望能夠記錄學習其原始碼的過程 data dataset 部分 涉及優化?property 一種python內建裝飾器,可以將乙個成員函式當成成員變數來訪問,例如 class planetoid inmemorydataset url def ini...

logback原始碼閱讀 根據原始碼學擴充套件點 七

原始碼 點選跳轉 1.xml定義 xml version 1.0 encoding utf 8 configuration property name charset value utf 8 name class encoder pattern p d t logger line n m n n p...

Qt執行緒池QThreadPool原始碼學習筆記

qlistallthreads 所有執行緒 qqueuewaitingthreads 等待佇列,當乙個執行緒中完成它的工作後,如果發現現有正在工作的執行緒數沒有超過設定上限數量,放到這裡,執行緒等待一定的時間,如果超時了,將這個執行緒放到expiredthreads qqueueexpiredthr...