Testable Redux Architecture on Android

Describe what is Redux and how to apply Redux architecture on Android

Transcript

1. TESTABLE REDUX ARCHITECTURE ON ANDROID Elvis Lin @AndroidTaipei
 2017-06-17
2. AGENDA • Why Not MVC • 3 Principle of Redux • Components of Redux • Sample Code • How to Test
3. WHY NOT MVC? • 太多狀狀態 • 狀狀態維護困難 • Model 跟 View 互動複雜
4. Event Controller /Activity Model Model Model Model Model View View View View View
6. WHY NOT MUTABLE STATE? • 需要⼿手動的去通知狀狀態的變化 • 資料/狀狀態會在我們不預期的時候發⽣生改變 • 非執⾏行行緒安全（Not thread safe） • 較難測試
7. REDUX PRINCIPLES
8. 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.
9. SINGLE SOURCE OF TRUTH • Traditional Style • 多個 Manager / DateStore 保存、維護所有資 料 • Redux Style • ⼀一個 Store/State 保存所有資料
10. STATE IS READ-ONLY • Traditional Style • Data/State是可變的(mutable) • Redux Style • State 是不可變的(immutable)，⽤用新的 State 取代舊的 state
11. CHANGES ARE MADE WITH PURE FUNCTIONS • Functional: • Only generate output from input, doesn’t modify other states. • Y = f(x), • ex: squareRoot(4) = 2
12. CHANGES ARE MADE WITH PURE FUNCTIONS • Traditional Style • 改變 state 的 method 是有 side-effect 的 • Redux Style • Reducer 接受 current state，輸出 new state
13. UNIDIRECTIONAL ARCHITECTURE
14. UNIDIRECTIONAL Source: http://www.michaelridland.com/xamarin/mvvm-mvc-is-dead-is-unidirectional-a-mvvm-mvc-killer/
15. HOW STORE/STATE UPDATE
16. REDUX
17. COMPONENTS OF 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
18. FLOW OF REDUX • 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
19. REDUX ARCH. Source: https://github.com/ReSwift/ReSwift
20. REDUCTOR: 
 REDUX LIBRARY
21. REDUCTOR • Use Annotation to create boilerplate code • All the boilerplate is written by a machine
22. 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);
 }
 }

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

24. 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();
 }
 }
25. Sample Code
26. – Reductor Example https://github.com/Yarikx/reductor
27. TESTING
28. 重複的程式碼已經⾃自動產⽣生 • 只剩下 Data & Function • State: Data • Reducer: Function
29. STATE • Inherit <State> to initialize data • Test the subclass of <State>
30. REDUCER • Each method of a reducer is a pure functional method • So, It’s a piece of cake!
31. 延伸問題 • 如何處理理非同步？ • 使⽤用 midleware • ⾃自⼰己修改 reductor!! • 頻繁的 new state 造成 GC？
33. 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
34. CONTACT ME • @AndroidTaipei • Blog: https://blog.elvismetaphor.me • Slides: https://speakerdeck.com/elvismetaphor • GitHub: https://github.com/elvismetaphor