introduce how to mix ReactJs and Redux in practice

1. Redux + ReactJs
範例為: ES6所撰寫

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

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

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

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

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

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

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

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

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

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

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

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

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

15. 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(初始狀態物件)

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

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

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

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

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

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

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

23. React-Redux運作
友善連結

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

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

26. React-Redux運作: Middleware
友善連結

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

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

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

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

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

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

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

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

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

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

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

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

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

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

41. 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’}

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

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

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