目前前端框架rdux實作

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

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

3. 前端框架REDUX實作
二.名詞定義
▸state
用來記錄狀態的變數 ie:playState='stop'
▸store
用來儲存project內所有的state
▸immutable
不可變動的資料

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

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

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

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

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