Use Redux To Rock Your Mobile Development

Use Redux architecture in mobile development

Transcript

1. 在你的 MOBILE 開發中使⽤用 REDUX
 USE REDUX TO ROCK YOUR MOBILE DEVELOPMENT Elvis Lin @mopcon
 2017-10-29
2. ⼤大綱 • 常⾒見見的架構：MVC、MVP、MVVM • 3 Principle of Redux • Redux 的元件 • 範例例程式 • 如何測試
3. WHY NOT MVC? • 太多狀狀態 • 狀狀態維護困難 • 肥⼤大的 Controller • Model 跟 View 互動複雜
4. Event Controller /Activity Model Model Model Model Model View View View View View
5. MVP • 將 UI 更更新的邏輯抽到 Presenter • Activity / ViewController 只負責 event 轉發跟畫⾯面更更新 • Presenter 不相依於 Framework 的程式 • Reference: https://speakerdeck.com/elvismetaphor/ introduction-to-mv-whatever-in-android
6. Source: https://medium.com/ios-os-x-development/ios-architecture-patterns-ecba4c38de52
7. MVVM • 將 UI 的狀狀態保存在 ViewModel 中 • Activity / ViewController 透過 Data binding 或 Rx (observable) 跟 ViewModel 溝通 • ViewModel 不相依於 Framework 的程式 • Reference: https://speakerdeck.com/elvismetaphor/ implements-mvvm-in-android-with-data-binding
8. Source: https://medium.com/ios-os-x-development/ios-architecture-patterns-ecba4c38de52
9. REDUX 架構
10. REDUX 架構 • 單向資料流 • 所有的狀狀態只透過發送 action 做更更新
11. UNIDIRECTIONAL ARCHITECTURE
12. STORE/STATE 更更新的⽅方式
13. UNIDIRECTIONAL Source: http://www.michaelridland.com/xamarin/mvvm-mvc-is-dead-is-unidirectional-a-mvvm-mvc-killer/
14. Source: https://github.com/reactjs/redux/issues/653
15. REDUX PRINCIPLES
16. 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.
17. SINGLE SOURCE OF TRUTH • Traditional Style • 多個 Manager / DateStore 保存、維護所有資 料 • Redux Style • ⼀一個 Store/State 保存所有資料
18. STATE IS READ-ONLY • Traditional Style • Data/State是可變的(mutable) • Redux Style • State 是不可變的(immutable)，⽤用新的 State 取代舊的 state
19. CHANGES ARE MADE WITH PURE FUNCTIONS • Functional: • Only generate output from input, doesn’t modify other states. • Y = f(x), • ex: squareRoot(4) = 2
20. CHANGES ARE MADE WITH PURE FUNCTIONS • Traditional Style • 改變 state 的 method 是有 side-effect 的 • Redux Style • Reducer 接受 current state，輸出 new state
22. WHY NOT MUTABLE STATE? • 需要⼿手動的去通知狀狀態的變化 • 資料/狀狀態會在我們不預期的時候發⽣生改變 • 非執⾏行行緒安全（Not thread safe） • 較難測試
23. REDUX
24. 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
25. 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
26. REDUX ARCH. Source: https://github.com/ReSwift/ReSwift
27. REDUCTOR: 
 REDUX LIBRARY (ANDROID)
28. REDUCTOR • Use Annotation to create boilerplate code • All the boilerplate is written by a machine
29. STATE @CombinedState
 @AutoValue
 public abstract class AppState {
 public abstract List<Note> notes();
 
 public abstract NotesFilter filter();
 
 public static TypeAdapter<AppState> typeAdapter(Gson gson) {
 return new AutoValue_AppState.GsonTypeAdapter(gson);
 }
 
 public List<Note> getFilteredNotes() {
 List<Note> 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);
 }
 }

30. 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);
 }

31. REDUCER @AutoReducer
 public abstract class NotesListReducer implements Reducer<List<Note>> {
 
 @AutoReducer.InitialState
 List<Note> initialState() {
 return TreePVector.empty();
 }
 
 @Action(value = NotesActions.ADD_ACTION,
 from = NotesActions.class)
 public List<Note> add(List<Note> state, int id, String content) {
 return TreePVector.from(state).plus(new Note(id, content, false));
 }
 
 
 
 public static NotesListReducer create() {
 return new NotesListReducerImpl();
 }
 }
32. Sample Code
33. – Reductor Example https://github.com/Yarikx/reductor
34. RESWIFT: 
 REDUX LIBRARY (IOS)
36. TESTING
37. 重複的程式碼已經⾃自動產⽣生 • 只剩下 Data & Function • State: Data • Reducer: Function
38. STATE • Inherit <State> to initialize data • Test the subclass of <State>
39. REDUCER • Each method of a reducer is a pure functional method • So, It’s a piece of cake!
40. 延伸問題 • 如何處理理非同步？ • 使⽤用 midleware • ⾃自⼰己修改 reductor!! • 如何組合多個 Action？ • 頻繁的 new state 造成 GC？
41. 業界案例例
42. Pinterest KKday
43. CONTACT ME • @AndroidTaipei • Blog: https://blog.elvismetaphor.me • Slides: https://speakerdeck.com/elvismetaphor • GitHub: https://github.com/elvismetaphor
45. 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
46. REFERENCE • Unidirectional Data Flow in Swift
 http://reswift.github.io/ReSwift/master/