TESTABLE REDUX ARCHITECTURE ON ANDROID Elvis Lin @AndroidTaipei
 2017-06-17

AGENDA • Why Not MVC • 3 Principle of Redux • Components of Redux • Sample Code • How to Test

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

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

No content

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

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

UNIDIRECTIONAL ARCHITECTURE

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

HOW STORE/STATE UPDATE

REDUX

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

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

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

REDUCTOR: 
 REDUX LIBRARY

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

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!! • 頻繁的 new state 造成 GC？

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

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