狠狠撸

Redux + ReactJs
範例為: 贰厂6所撰写

大綱
? Redux 概觀
? Redux的哲學
? Redux元件解析
? React-Redux
? 進階探討

Redux的概觀
Action
Creators
Store Reducers
Action
Previous State
new State
? Action Creators產生Action
? Store呼叫對應的Reducer進行處理
? Reducer將處理完畢後的新State回傳給Store

Redux的相關資訊
? Redux本是即是一個狀態管理的框架
? 本身受到Facebook所提出的Flux框架影響頗深
? Redux並非是為了特定現在流行的Js框架而設計,單純是為了達成
以下功能:
? 系統的狀態管理
? 關注點分離(SoC)
? Pure function programming導向

Redux作者
? 作者: Dan Abramov
? 居住地: London, UK
? 目前在Facebook服務
? Github網址: https://github.com/gaearon
? Redux免費教學:
https://egghead.io/series/getting-started-with-
redux

Redux的哲學
? Redux借鑑聚合運算 – Reduce
? 綜觀整個系統的運作,其實不過就是依使用者的操作讓狀態不斷的
改變
? 改變狀態的運算就如同聚合運算Reduce的本意;讓狀態值的變化不
斷的收斂

為什麼要選擇Redux
? 解決Js狀態管理有許多套件可以選擇,例: Immutable.js
? 選擇Redux的原因在於當系統屬於大型系統時,其狀態物件也會隨
之複雜,需要有個更為彈性的框架來處理
? 彈性!?那是啥?

Redux適用場景
? 系統好大好複雜
(太小的請不要用)
? 可以詢問一下自己,真的需要用Redux嗎?

Redux的彈性來源-
Separate of Concern(SoC)
? Redux利用責任分擔(Delegation)來製造彈性
? 每個Redux的元件都僅負責單一的工作項目
? 隨時可以擴充和修改某個元件,而不用擔心會影響到系統的其它元
件

Redux熱門的原因
? Redux中每個元件的撰寫都極其簡單,皆是以Js原生語法作為主體
? Redux達到Flux的效果,但是其學習曲線卻不高
? Redux可以輕鬆地與任何Js框架結合,包含: AngularJs 2 …

Redux元件解析
? Redux一共只有三個元件:
? Action Creator
? Store
? Reducer

Redux元件 – Action Creator
? Action Creator本體是一個Js函數,其回傳一個Action物件
? Action物件是一個原生的Js物件,但其必定要有一個type屬性,其餘
屬性可以依需求添加
? Action會成為Reducer的輸入參數
Action Creator範例
Action物件

Redux元件-Reducer
? 本身為一個單純的Js函數,但其有固定的兩個輸入參數:
? State: 初始狀態物件
? Action: ActionCreator所產生的Action物件
? Reducer僅處理狀態的變更,並且在函數執行的最後回傳新的狀態
物件
(建議使用Object.assign這個es6的功能來處理)
? Reducer可以是僅專注在處理狀態物件中某些屬性,也可以在其中
撰寫Switch-case;依action的type值,而進行不同的處理
? 當有多個Reducer時,可以使用combineReducers將它們合併成一個

Redux元件-Reducer範例
1. State : Store的當前狀態物件
2. Action : 由Component傳遞來的action物件
3. Action.type : action的類型
4. New State : 以Object.assign回傳新的物件
1 2
3
4

Redux元件-Store
? Store掌控狀態物件
? 一個Redux系統僅只有一個Store; Action Creator和Reducer都是多個
? Store提供3個API:
? API : getState() – 取得當前Store中的狀態
? API : subscribe(FnLis) – 註冊Store狀態改變的傾聽器(Listener)
? API : dispatch – 提供與Redux結合的前端框架資料流觸發的關鍵函數
? Store是靠createStore這個函數所創建,其輸入參數為:
? Reducer
? Initial State Object(初始狀態物件)

Redux元件-Store範例
? 以reducer作為參數
1
2
3
1. 訂閱State變化事件
2. Dispatch action物件
3. 結束訂閱

React-Redux
? Redux本身並非是為了React而打造的,因此,若要與React協作,則勢
必會需要一個溝通彼此的”橋”

添加React-Redux之後…
? 除了原本Redux的元件之外,還多了兩個需要特別題的元件:
? Connect
? Provider

回望ReactJs
? ReactJs本身僅是一個View相關的Library
? 當畫面複雜時,需要的Component以及Component之間的組成就更
為複雜
? ReactJs建議採用mediator pattern(中介者樣式)
? 狀態只保存在最頂層的Component
? 所有改變狀態的方法邏輯都由最頂層Component提供
? 底層Component僅負責繪出畫面

ReactJs為何需要Redux
? 當畫面的使用者互動越友善,其頂層Component就需要更複雜的狀
態物件結構,以及一沱的狀態改變方法邏輯
(Bad Smell)
? Redux由Store負責管理狀態物件,改變狀態的方法即是一個個的
Reducer,原本都由最頂層Component負責,現在可以完全釋放了

Connect
? 由於Component已經沒有保存狀態,故,它需要由Redux將資料以Props
傳入,藉此讓Component重繪畫面
? Connect具有兩個輸入參數(型別皆為函數):
? mapStateToProps : 將Store的狀態轉型成特定結構的物件,再傳遞給Component
? mapDispatchProps : 提供以dispatch作為邏輯的方法物件,再傳遞給Component
成為Props傳給Component
成為Props傳給Component

Provider
? 當呼叫ReactDOM的render方法時,Component才會被真正進行處理
? Provider如同一個Root Component,它接收Redux的Store作為參數,
並傳遞給開發人員所撰寫的Component

React-Redux運作
友善連結

進階探討
? 若僅只是瞭解上述的概念,是不足以實戰的!
? 進階探討才是實戰!

討論一: 同步/非同步
? 在Modern WebSite中,在前端使用Ajax呼叫後端API來取得資料,成
為了一門顯學
? 若要能夠讓React-Redux可以處理Ajax的非同步處理,需要從Redux
的Middleware(中間層)著手
? 這一切都是因為Redux的Store預設上是僅能接受Js原生物件,若是
非同步處理,勢必會遇見Promise物件或是特定的處理方式,這是原
始Redux所不能相容的…

React-Redux運作: Middleware
友善連結

Redux的元件-Middleware
? Middleware主要在於處理Action
? 當Component觸發dispatch(ActionCreator())之後,Action會在被派送
的過程中由Middleware一層層的處理,其概念就如同:
? ASP.Net MVC/WebAPI : ActionFilter
? J2EE : Filter
? NodeJs : Middleware

該怎麼寫Middleware?
? 在Middleware中可以採取不同的結束模式:
? 傳遞給下一個Middleware, 如: next(action)
? 跳過某些Middleware, 如: dispatch(action)
? 直接結束, 如: return
? 用npm找套件比較快….

常用的Middleware套件
? Redux-thunk : 允許action可以是一個函數,用來啟動非同步
? Redux-promise : action本身就是一個Promise物件
? Redux-logger : action為一個Js物件,可用來紀錄action和nextState

以Redux-Thunk來解決非同步問題-
觀念解析
? 對於Ajax處理來說,它有3個重要的事件:
? 實際上會有兩組action;一組是上述的三個事件型action,另一組則
是實際上的ajax action
[成功]
[失敗]
1
2
3
? Ajax呼叫開始
? Ajax呼叫結束-失敗
? Ajax呼叫結束-成功

簡單範例-Action
Ajax觸發事件-Action Ajax-Action
友善連結

簡單範例-Reducer
友善連結
1
2
3
1. 非同步程式以isFetching旗標來告知使用者系統處理現況
(處理中、已完成)
2. 準備發出Ajax
3. 础箩补虫已结束

簡單範例-Store
友善連結
1
2
3
1. 引入redux-thunk和redux-logger middleware
2. 建構store時,套用middleware
3. 觸發fetchPosts這個ActionCreator

討論二: SPA
? 在Google Mail之後,幾乎很多網站都傾向以SPA(Single Page
Application)的方式來撰寫網站
? ReactJs本身並不提供SPA特性,需要額外安裝React-Router來達成

React-Router
? 是一款以Component為導向的路由套件,與ReactJs協作
? 允許以JSX來描述路由之間的關係
? React-Router相依於History套件,若系統環境npm版本是3,則需要額
外自行安裝history套件

主要的物件
? 其實主要都是圍繞在兩個物件:
? Route
? Link
? Route就是用於路由組態之用;React-Router會解析當前Url,並且載
入路由匹配的元件
? 當元件內容需要有類似超鏈結的功能,Link可作為其用

路由匹配
? React-Router的路由允許巢狀
? 允許部份匹配是可選的
? 允許參數
參數路由
巢狀路由

預設路由/鏈結
? Reac-Router提供預設路由(IndexRoute)和預設鏈結(IndexLink)
? IndexRoute用於巢狀情境,指定首次載入時的子頁內容是來自那個
元件
? IndexLink用於在當其路由字串太過通用時,可能會導致被React-
Router誤判是已被致能(enable),故提供此元件

路徑語法
? 絕大多數都是依照Route中指定的字串進行比對
? 特殊符號
符號說明
: param 匹配一段在/,?,#之後的Url,命中的部份都是參數
() 其()中的內容為可選項目
* 非貪婪,可匹配任意字串,直到命中下一個字串,或到
達Url尾端

History物件
? React-Router相依於History物件,而History套件提供:
? createHashHistory
? createBrowserHistory
? createMemoryHistory
? createHashHistory為預設的History物件,其相容於IE8
? createBrowserHistory是主要推荐使用的History物件
? createMemoryHistory用於實現Server-Side Rendering

React-Router的頁面跳轉
? 元件會在Url跳轉時,接收到React-Router所傳遞的參數:
? children : 子元件的內容
? params : QueryString參數
? location : 當前的localtion物件
? history : 可用history物件在程式中控制頁面挑轉
? route : 渲染當前元件的Route物件
? routeParams: 與params不同在於;routeParams僅只有routing pattern字串所
定義的部份,而params會一概視為參數
例如: 定義routing pattern為users/:Id,而Url當前為/users/123/name/john,則
this.props.routeParams為{Id:’123’}
this.props.params為{Id:123, name: ‘john’}

具名路由組態
? 可在同一頁中指定並具名組件
? 使用具名路由,就無法從this.props.children取得
資訊(其為undefined)

React-Router下的元件生命週期
Url: / Url: /invoice/123 Url: /invoice/456
[跳轉] [跳轉]

React-Router-Redux
? 以實務來說,其實: React + Redux + React-Router就能夠製做出SPA的
網站,但是在某些特定需求下,會需要額外再加上
React-Router-Redux
? 若有下列的特殊狀況,可以考慮使用React-Router-Redux:
? 紀錄使用者所有跳轉
? 儲存跳轉紀錄
? 回放(Replay)使用者跳轉操作

狠狠撸

Redux+react js

Recommended

More Related Content

What's hot (20)

Similar to Redux+react js (20)

More from 國昭張 (20)

Redux+react js

狠狠撸

Redux+react js

Recommended

More Related Content

What's hot (20)

Similar to Redux+react js (20)

More from 國昭 張 (20)

Redux+react js

More from 國昭張 (20)