redux actions原始碼解析

2021-09-25 18:03:19 字數 3398 閱讀 9427

redux-actions是乙個簡化action和reducer建立的乙個封裝庫

常用api函式:

createaction()

handleactions()

2.1 用法

一般建立action方式:

export

const

addtodo

=(text)

=>

()

createaction 函式建立action:

export

const addtodo =

createaction

('add_todo'

,(text)

=>

(text)

)

2.2 原始碼
/**

* 引數不是function呼叫此函式

*/function

identity

(t)/**

* 建立action

* @param type action的型別

* @param actioncreator 需要建立的action,函式

* @param metacreator action的屬性

* @returns

*/export

default

function

createaction

(type, actioncreator, metacreator)

;/**

* 如果給匿名函式傳遞引數的長度為1個,或者第乙個引數元素的型別為error,那麼這麼action的error屬性為true

*/if(args.length ===

1&& args[0]

instanceof

error

)/**

* 傳遞到action裡面的函式

*/if(

typeof metacreator ===

'function'

)return action;};

}

3.1 用法

一般reducer操作state方式:

const defaultstate =

'test text'

const

reducer

=(state = defaultstate, action)

=>

}

createaction 提供的 handleactions() 處理 reducer:

const initialstate =

const reducer =

handleactions()

},initialstate

)

3.2 原始碼
import handleaction from

'./handleaction'

;import ownkeys from

'./ownkeys'

;import reducereducers from

'reduce-reducers'

;/**

* * @param handlers 所有的action

* @param defaultstate 初始的state

* @returns 返回reducer

*/export

default

function

handleactions

(handlers, defaultstate));

/** * 處理過後的reduce

*/const reducer =

reducereducers

(...reducers)

return

typeof defaultstate !==

'undefined'

?(state = defaultstate, action)

=>

reducer

(state, action)

: reducer;

}

ownkeys.js

用於判斷物件屬性的工具

export

default

function

ownkeys

(object)

/** * 返回物件自己(非原型繼承的屬性)的屬性名稱,包括函式。

* object.keys只適用於可列舉的屬性,而object.getownpropertynames返回物件自己的全部屬性名稱。

*/let keys = object.

getownpropertynames

(object)

;/**

* getownpropertysymbols

* 返回symbol型別的屬性

*/if(

typeof object.getownpropertysymbols ===

'function'

)return keys;

}

handleaction.js

操作action

import

from

'flux-standard-action'

;/**

* 判斷是不是function

*/function

isfunction

(val)

/** * 處理action

* @param type action型別

* @param 所有的reducers

* @returns

*/export

default

function

handleaction

(type, reducers)

// otherwise, assume an action map was passed

const reducer = reducers[handlerkey]

;return

isfunction

(reducer)

?reducer

(state, action)

: state;};

}

reduce-reducers

export

default

function

reducereducers

(...reducers)

參考文章:

《原始碼閱讀》原始碼閱讀技巧,原始碼閱讀工具

檢視某個類的完整繼承關係 選中類的名稱,然後按f4 quick type hierarchy quick type hierarchy可以顯示出類的繼承結構,包括它的父類和子類 supertype hierarchy supertype hierarchy可以顯示出類的繼承和實現結構,包括它的父類和...

Cartographer原始碼篇 原始碼分析 1

在安裝編譯cartographer 1.0.0的時候,我們可以看到 主要包括cartorgarpher ros cartographer ceres sover三個部分。其中,ceres solver用於非線性優化,求解最小二乘問題 cartographer ros為ros平台的封裝,獲取感測器資料...

python原始碼剖析 Python原始碼剖析

第頁共 頁python 原始碼剖析 物件機制 1.物件 在python 的世界中,一切都是物件,乙個整數是乙個物件,乙個字串也是 乙個物件,更為奇妙的是,型別也是乙個物件,整數型別是乙個物件,字串類 型也是乙個物件。從 年guido 在那個聖誕節揭開 python 世界的大幕開始,一直到現在,pyt...