狠狠撸

前端框架 REDUX實作
2016/05/04

前端框架REDUX實作
一.DATA BINDING
?two way binding
改變data model ,view跟著異動
view異動,改變data model
?Flux one way binding
使用state記錄狀態,state改變,使用到該state的元件跟著改變
元件的顯示(render) 只會因state的異動而改變

二.名詞定義
?state
用來記錄狀態的變數 ie:playState='stop'
?store
用來儲存project內所有的state
?immutable
不可變動的資料

二.名詞定義
?action
包含要執行的動作資訊物件
{
type:’Play',
data:
}
?reducer
用來對接收到的action做運算,
並改變特定的state
ie: 發出playAction 改變playState

三.使用情境
?使用者在view的dom物件上執行動作(ie:onClick)
會將該動作所要執行的action發送出去ie:dispatch(playAction)
?Reducer會自動解析action,
並改變儲存在store內的state資料
?view會因state改變而重新render

四.前端框架上的實作(VIEW)
?發送action
@dispacth(type,data)
?建立與state連結
@connectState()
?取得指定state的值
State.get(type)

四.前端框架上的實作(VIEW)
?監聽要接收的state
@stateHandler:(stateObj)=>
?StateObj
{
type: #action type
state: # 新的state
oldState #原有的state
result #reducer運算的結果
}

五.前端框架上的實作(REDUCER)
?@addAction(type,handler)
bind type與reducer function
指定type要用哪個handler處理
?handler(type,oldState,data)
會拿到type,oldState,data來做reducer運算
運算完需執行
@dispatch(type,newState,result)
讓view收到

狠狠撸

前端框架搁别诲耻虫实作

More Related Content

前端框架搁别诲耻虫实作