Tweet
Tweet

Slide 1

Slide 1 text

Redux on Android using Kotlin [email protected] @chennevin

Slide 2

Slide 2 text

Agenda • Android’s Problem • Why Redux is helpful • Kotlin / Redux introduction • Demo

Slide 3

Slide 3 text

Hello! • Android ? • Web ? • Kotlin?

Slide 4

Slide 4 text

Android’ UI Issues • Immutability + Asynchroncity • Complexity grows with your requirement

Slide 5

Slide 5 text

Android’s architecture • First, view and data are changed in controllers • MVP, presenter operate encapsulated view • MVVM , view subscribe to model change • Event Bus ,Rx, publish subscribe…. • concept : isolation of change, separation of concerns

Slide 6

Slide 6 text

Store Terms Action Reducer State POJO, Type & Payload pure functions that return data Data in app. ex. variables Singleton that holds ref to below

Slide 7

Slide 7 text

Store Example #2 Split String Action Reducer State { type: “split”
 payload:“abcd” } a new state with [“a”,”b”,”c”,”d”] is created initial state : [] if type is “split” split the payload final state : [“a”,”b”,”c”,”d”]

Slide 8

Slide 8 text

Store Example #3 Search App Action Reducer State { 
 type: 'Search', 
 name: 'Apple' 
 } Apple initial state : null if type is “Search” -> find in mem cache
 -> find in disk cache
 -> find in network
 -> update state final state : Apple

Slide 9

Slide 9 text

Redux • Command Pattern (mutate state) • Observer (Publish-Subscribe) Pattern ( bind state) • Bind Properties Pattern (update view)

Slide 10

Slide 10 text

Redux • Principles : • Single source of truth • State is read-only • Changes are made with pure functions • Good : Complexity not necessarily grows with your requirement

Slide 11

Slide 11 text

Counter App Single State, simple Action

Slide 12

Slide 12 text

Store Terms Action Reducer State +1 on the result if action’s type is “add”, I’ll add “1” to the result could be 0,1,2,3,4,5… result is initially 0

Slide 13

Slide 13 text

Design for Redux

Slide 14

Slide 14 text

Design Redux 1 2 3 4

Slide 15

Slide 15 text

Why Kotlin? • data class -> copy() • val -> immutability • concise syntax ( ex. when, DSL, class() ) • lambda • object -> singleton • Android sugar

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

• Action: • Pojo that has type and payload • type : command • payload : parameter • class • val : read only • default constructor : auto defined properties class x extends State{ int num; int getNum()…. int setNum(int n)… } • seal class : • enum in Kotlin • restrict class hierarchy • sub class could have multiple instance

Slide 18

Slide 18 text

• Actor of an action • One state one reducer • Separation of concern • Pure function : less side effect • Finite number of states : predictable states • Could have sub-reducer ( combinedReducer) and dispatch to them. • “when” statement : like switch, but no cast • each line is an expression and can return value • work with Java

Slide 19

Slide 19 text

• the variables that current app holds • like a vm snapshot • could have sub state, let producer decides what to response and how to react • copy() ,equal() , hashCode(), toString() for free. • Destructuring Declarations • copy() : immutability • could have child state, let reducer decides what to react

Slide 20

Slide 20 text

• single source of true • dispatch is atomic operation • unidirectional data flow Publish - Subscribe state is mutated using pure function

Slide 21

Slide 21 text

Interact to Redux

Slide 22

Slide 22 text

UI Event Dispatch Action Reducer Return New State Notify Subscribers onStateChanged View Update

Slide 23

Slide 23 text

Android Store Action Reducer State type: action_plus
 payload : 1 if (type== action_add) return state using copy data class State(var num:Int) AppStore = Store.create(initial:State,reducers: Reducer[] ) 2:dispatch Subscribe 1:Hook 3:Return new Sate onStateChange

Slide 24

Slide 24 text

bind mapStateToProps Hook bind mapStateToProps

Slide 25

Slide 25 text

Todo App Multiple State, Async Action

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Android component

Slide 28

Slide 28 text

dagger AppStore as state
 of DevStore = Time Travel

Slide 29

Slide 29 text

dagger AppStore as state
 of DevStore = Time Travel

Slide 30

Slide 30 text

Action

Slide 31

Slide 31 text

Reducer

Slide 32

Slide 32 text

State

Slide 33

Slide 33 text

Action Creator

Slide 34

Slide 34 text

Operation

Slide 35

Slide 35 text

Service

Slide 36

Slide 36 text

click “done” to update the list select all multiple selection delete one todo clear selected enter new todo

Slide 37

Slide 37 text

auto update with store change Click to open the list auto update with store change

Slide 38

Slide 38 text

Redux boilerplate Inject store Subscribe to store. Send action after here React to state change

Slide 39

Slide 39 text

source code • https://github.com/cnevinc/redux-java/tree/ jcconf/detail_advanced • fork from https://github.com/glung/redux-java

Slide 40

Slide 40 text

Recap • Dev Tool - Time Travel • Async call • Animation • Action Creator

Slide 41

Slide 41 text

The Good • make predictable result / state • only modify your code in a finite number of state • Separation of concern • Finite State Machine

Slide 42

Slide 42 text

The Bad • Hard to implement • Mindset Change

Slide 43

Slide 43 text

Bonus • Better work with React ( check Anvil!) • http://zserge.com/blog/anvil-app- architecture.html • jvm-redux • https://github.com/jvm-redux/jvm-redux-api

Slide 44

Slide 44 text

Porting Redux to Android • https://github.com/pardom/redux-kotlin • https://github.com/glung/redux-java • https://github.com/brianegan/bansa • https://github.com/AngusMorton/kedux • https://github.com/trikita/jedux • https://github.com/beyondeye/Reduks

Slide 45

Slide 45 text

Blogs ,Talks , Courses • https://github.com/bkase/cyklic • http://zserge.com/blog/android-mvp-mvvm-redux-history.html • http://zserge.com/blog/anvil-app-architecture.html • https://realm.io/news/kau-lee-kase-reduxing-ui-borrowing-from-web/ • https://www.youtube.com/watch?v=SsH_rByBbq4 • http://hannesdorfmann.com/android/model-view-intent • https://www.udemy.com/the-complete-react-native-and-redux-course • https://facebook.github.io/flux/

Slide 46

Slide 46 text

Special Thanks • @kudochien • @Lungos https://github.com/glung/redux-java