在你的 MOBILE 開發中使⽤用 REDUX
 USE REDUX TO ROCK YOUR MOBILE DEVELOPMENT Elvis Lin @mopcon
 2017-10-29 

⼤大綱 • 常⾒見見的架構：MVC、MVP、MVVM • 3 Principle of Redux • Redux 的元件 • 範例例程式 • 如何測試 

WHY NOT MVC? • 太多狀狀態 • 狀狀態維護困難 • 肥⼤大的 Controller • Model 跟 View 互動複雜 

Event Controller /Activity Model Model Model Model Model View View View View View 

MVP • 將 UI 更更新的邏輯抽到 Presenter • Activity / ViewController 只負責 event 轉發跟畫⾯面更更新 • Presenter 不相依於 Framework 的程式 • Reference: https://speakerdeck.com/elvismetaphor/ introduction-to-mv-whatever-in-android 

Source: https://medium.com/ios-os-x-development/ios-architecture-patterns-ecba4c38de52 

MVVM • 將 UI 的狀狀態保存在 ViewModel 中 • Activity / ViewController 透過 Data binding 或 Rx (observable) 跟 ViewModel 溝通 • ViewModel 不相依於 Framework 的程式 • Reference: https://speakerdeck.com/elvismetaphor/ implements-mvvm-in-android-with-data-binding 

Source: https://medium.com/ios-os-x-development/ios-architecture-patterns-ecba4c38de52 

REDUX 架構 

REDUX 架構 • 單向資料流 • 所有的狀狀態只透過發送 action 做更更新 

UNIDIRECTIONAL ARCHITECTURE 

STORE/STATE 更更新的⽅方式 

UNIDIRECTIONAL Source: http://www.michaelridland.com/xamarin/mvvm-mvc-is-dead-is-unidirectional-a-mvvm-mvc-killer/ 

Source: https://github.com/reactjs/redux/issues/653 

REDUX PRINCIPLES 

THREE PRINCIPLES (REDUX) • Single source of truth
 The state of your whole application is stored in an object tree within a single store. • State is read-only
 The only way to change the state is to emit an action. • Changes are made with pure functions
 Pure reducers specify how the state tree is transformed. 

SINGLE SOURCE OF TRUTH • Traditional Style • 多個 Manager / DateStore 保存、維護所有資 料 • Redux Style • ⼀一個 Store/State 保存所有資料 

STATE IS READ-ONLY • Traditional Style • Data/State是可變的(mutable) • Redux Style • State 是不可變的(immutable)，⽤用新的 State 取代舊的 state 

CHANGES ARE MADE WITH PURE FUNCTIONS • Functional: • Only generate output from input, doesn’t modify other states. • Y = f(x), • ex: squareRoot(4) = 2 

CHANGES ARE MADE WITH PURE FUNCTIONS • Traditional Style • 改變 state 的 method 是有 side-effect 的 • Redux Style • Reducer 接受 current state，輸出 new state 

No content

WHY NOT MUTABLE STATE? • 需要⼿手動的去通知狀狀態的變化 • 資料/狀狀態會在我們不預期的時候發⽣生改變 • 非執⾏行行緒安全（Not thread safe） • 較難測試 

REDUX 

REDUX 的元件 • Store: dispatch action, and notify the subscriber • State: key the data of the app • Action: Define which should be modify, and provide necessary parameter • Reducer: Modify the state by the action • View/Controller/Presenter: Get the event and dispatch it to store 

REDUX 更更新的流程（FLOW） • Store object holds and maintains the state • To change the state application can dispatch actions to Store • For each action Store compute new state using pure function f(s, a) (called reducer) • Store replace current state with new state 

REDUX ARCH. Source: https://github.com/ReSwift/ReSwift 

REDUCTOR: 
 REDUX LIBRARY (ANDROID) 

REDUCTOR • Use Annotation to create boilerplate code • All the boilerplate is written by a machine 

STATE @CombinedState
 @AutoValue
 public abstract class AppState {
 public abstract List notes();
 
 public abstract NotesFilter filter();
 
 public static TypeAdapter typeAdapter(Gson gson) {
 return new AutoValue_AppState.GsonTypeAdapter(gson);
 }
 
 public List getFilteredNotes() {
 List notes = this.notes();
 NotesFilter filter = this.filter();
 return Utils.filter(ConsPStack.from(notes), note ->
 filter == NotesFilter.ALL
 || filter == NotesFilter.CHECKED && note.checked
 || filter == NotesFilter.UNCHECKED && !note.checked);
 }
 }
 

ACTION @ActionCreator
 public interface NotesActions {
 String ADD_ACTION = "ADD_ITEM";
 String TOGGLE = "TOGGLE";
 String REMOVE_ITEM = "REMOVE_ITEM";
 
 @ActionCreator.Action(NotesActions.ADD_ACTION)
 Action add(int id, String content);
 
 @ActionCreator.Action(NotesActions.REMOVE_ITEM)
 Action remove(int id);
 
 @ActionCreator.Action(NotesActions.TOGGLE)
 Action toggle(int id);
 }
 

REDUCER @AutoReducer
 public abstract class NotesListReducer implements Reducer> {
 
 @AutoReducer.InitialState
 List initialState() {
 return TreePVector.empty();
 }
 
 @Action(value = NotesActions.ADD_ACTION,
 from = NotesActions.class)
 public List add(List state, int id, String content) {
 return TreePVector.from(state).plus(new Note(id, content, false));
 }
 
 
 
 public static NotesListReducer create() {
 return new NotesListReducerImpl();
 }
 } 

Sample Code 

– Reductor Example https://github.com/Yarikx/reductor 

RESWIFT: 
 REDUX LIBRARY (IOS) 

No content

TESTING 

重複的程式碼已經⾃自動產⽣生 • 只剩下 Data & Function • State: Data • Reducer: Function 

STATE • Inherit to initialize data • Test the subclass of 

REDUCER • Each method of a reducer is a pure functional method • So, It’s a piece of cake! 

延伸問題 • 如何處理理非同步？ • 使⽤用 midleware • ⾃自⼰己修改 reductor!! • 如何組合多個 Action？ • 頻繁的 new state 造成 GC？ 

業界案例例 

Pinterest KKday 

CONTACT ME • @AndroidTaipei • Blog: https://blog.elvismetaphor.me • Slides: https://speakerdeck.com/elvismetaphor • GitHub: https://github.com/elvismetaphor 

No content

REFERENCE • Redux for Android. Predictable state container library for Java/Android
 https://github.com/Yarikx/reductor • Unidirectional data flow on Android using Kotlin
 https://speakerdeck.com/cesarvaliente/unidirectional-data- flow-on-android-using-kotlin 

REFERENCE • Unidirectional Data Flow in Swift
 http://reswift.github.io/ReSwift/master/