SlideShare a Scribd company logo
前端框架 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的異動而改變
前端框架REDUX實作
二.名詞定義
▸state
用來記錄狀態的變數 ie:playState='stop'
▸store
用來儲存project內所有的state
▸immutable
不可變動的資料
前端框架REDUX實作
二.名詞定義
▸action
包含要執行的動作資訊物件
{
type:’Play',
data:
}
▸reducer
用來對接收到的action做運算,
並改變特定的state
ie: 發出playAction 改變playState
前端框架REDUX實作
三.使用情境
▸使用者在view的dom物件上執行動作(ie:onClick)
會將該動作所要執行的action發送出去ie:dispatch(playAction)
▸Reducer會自動解析action,
並改變儲存在store內的state資料
▸view會因state改變而重新render
前端框架REDUX實作
四.前端框架上的實作(VIEW)
▸發送action
@dispacth(type,data)
▸建立與state連結
@connectState()
▸取得指定state的值
State.get(type)
前端框架REDUX實作
四.前端框架上的實作(VIEW)
▸監聽要接收的state
@stateHandler:(stateObj)=>
▸StateObj
{
type: #action type
state: # 新的state
oldState #原有的state
result #reducer運算的結果
}
前端框架REDUX實作
五.前端框架上的實作(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

PPTX
淺談 Ado.net
PDF
丁原:海量数据迁移方案
PPTX
Modern web develop
PPTX
前端框架發展
PPTX
前端各階段工作
PPTX
Nodejs api server_implement
PPTX
Google webmaster guide for starters
PDF
Web of knowledge advanced features
淺談 Ado.net
丁原:海量数据迁移方案
Modern web develop
前端框架發展
前端各階段工作
Nodejs api server_implement
Google webmaster guide for starters
Web of knowledge advanced features

Viewers also liked (16)

PPTX
Affordable web design
PPTX
How to search the Internet, a guide to save time and effort
PDF
Windows 8 and the Cloud
PPTX
Using the internet for search
PPSX
I know how to search the internet,
PDF
Internet Search Tips featuring Google
PPTX
Internet Search
PDF
Debugging and Tuning Mobile Web Sites with Modern Web Browsers
PPT
Internet Search Tips (Google)
PPT
Calculate your Water Footprint at H2O Conserve
PPT
Bad websites
PDF
The Modern Web, Part 2: HTML5
PDF
WATER FOOTPRINT ACCOUNTING FOR CATCHMENTS AND RIVER BASINS
PDF
How to develop modern web application framework
PPTX
When worlds Collide: HTML5 Meets the Cloud
PDF
The Modern Web, Part 1: Mobility
Affordable web design
How to search the Internet, a guide to save time and effort
Windows 8 and the Cloud
Using the internet for search
I know how to search the internet,
Internet Search Tips featuring Google
Internet Search
Debugging and Tuning Mobile Web Sites with Modern Web Browsers
Internet Search Tips (Google)
Calculate your Water Footprint at H2O Conserve
Bad websites
The Modern Web, Part 2: HTML5
WATER FOOTPRINT ACCOUNTING FOR CATCHMENTS AND RIVER BASINS
How to develop modern web application framework
When worlds Collide: HTML5 Meets the Cloud
The Modern Web, Part 1: Mobility
Ad

前端框架Redux實作