Unidirectional State Flow patterns
 A Refactoring Story

Unidirectional State Flow Pattern Understanding the fyi: plenty of Rx. use

Movie Search Demo app

Search Add To History Restore from History

Activity ViewModel OMDB api SEARCH fun onSearchMovie() : SearchMovieResult

Activity ViewModel SEARCH fun onAddToHistory() :SearchHistoryResult

fun onRestoreFromHistory() :SearchMovieResult Activity ViewModel SEARCH

fun onRestoreFromHistory() :SearchMovieResult Problem with MVVM Activity ViewModel SEARCH fun onAddToHistory() :SearchHistoryResult OMDB api fun onSearchMovie() : SearchMovieResult

DashboardActivity DashboardViewModel Problem with MVVM

DashboardActivity DashboardViewModel Problem with MVVM

1. state handling 2. debugging 3. testing

Activity ViewModel SEARCH fun onRestoreFromHistory() :SearchMovieResult fun onAddToHistory() :SearchHistoryResult fun onSearchMovie() : SearchMovieResult Problem with MVVM

fun onRestoreFromHistory() :SearchMovieResult Activity ViewModel SEARCH fun onAddToHistory() :SearchHistoryResult fun onSearchMovie() : SearchMovieResult Unidirectional State Flow

Terminology

Terminology Events fun onRestoreFromHistory() :SearchMovieResult Activity ViewModel SEARCH fun onAddToHistory() :SearchHistoryResult fun onSearchMovie() : SearchMovieResult

Terminology Events Results fun onRestoreFromHistory() :SearchMovieResult Activity ViewModel SEARCH fun onAddToHistory() :SearchHistoryResult fun onSearchMovie() : SearchMovieResult

Terminology Events ViewState fun onRestoreFromHistory() :SearchMovieResult Activity ViewModel SEARCH fun onAddToHistory() :SearchHistoryResult fun onSearchMovie() : SearchMovieResult Results

-> ViewState Step 1 Events fun onRestoreFromHistory() :SearchMovieResult Activity ViewModel SEARCH fun onAddToHistory() :SearchHistoryResult fun onSearchMovie() : SearchMovieResult Results ViewState

data class MovieViewState( val searchBoxText: String?, val searchedMovieTitle: String, val searchedMovieRating: String, val searchedMoviePoster: String, val adapterList: List ) SEARCH What does the ViewState class look like

SEARCH data class MovieViewState( val searchBoxText: String?, val searchedMovieTitle: String, val searchedMovieRating: String, val searchedMoviePoster: String, val adapterList: List ) { vs -> // view state } searchResultTitleText.text = vs.searchedMovieTitle searchResultRatingText.text = vs.searchedMovieRatin vs.searchedMoviePoster.let { Glide.with(ctx) .load(vs.searchResultImageView) .placeholder(spinner) .into(ms_mainScreen_poster) } ?: run { searchResultImageView.setImageResource(0) } listAdapter.submitList(vs.adapterList)} Binding ViewState to Views (inside Activity) vs.searchBoxText?.let { searchBoxEditText.setText(it) }

“render” method SEARCH ViewModel Activity fun render(events: MovieEvent): Observable { vs -> // view state searchResultTitleText.text = vs.searchedMovieTitle vs.searchBoxText?.let { searchBoxEditText.setText(it) }

Activity (onResume) -> ViewState vs.searchedMoviePoster.let { Glide.with(ctx) .load(vs.searchedMoviePoster) .placeholder(spinner) .into(ms_mainScreen_poster) } ?: run { ms_mainScreen_poster.setImageResource(0) } { vs -> // view state searchResultTitleText.text = vs.searchedMovieTitle searchResultRatingText.text = vs.searchedMovieRating vs.searchBoxText?.let { searchBoxEditText.setText(it) } viewModel.render( searchMovieEvents, addToHistoryEvents, restoreFromHistoryEvents ) .observeOn(AndroidSchedulers.mainThread()) .subscribe( Observable fun render(events: MovieEvent):

viewModel.render( searchMovieEvents, addToHistoryEvents, restoreFromHistoryEvents ) .observeOn(AndroidSchedulers.mainThread()) .subscribe( Activity (onResume) vs.searchedMoviePoster.let { Glide.with(ctx) .load(vs.searchedMoviePoster) .placeholder(spinner) .into(ms_mainScreen_poster) } ?: run { ms_mainScreen_poster.setImageResource(0) } { vs -> // view state searchResultTitleText.text = vs.searchedMovieTitle searchResultRatingText.text = vs.searchedMovieRating vs.searchBoxText?.let { searchBoxEditText.setText(it) } Simpler Testing !!!

-> ViewState Step 1 Events fun onRestoreFromHistory() :SearchMovieResult Activity ViewModel SEARCH fun onAddToHistory() :SearchHistoryResult fun onSearchMovie() : SearchMovieResult Results ViewState

Step 2 Events -> Events fun onRestoreFromHistory() :SearchMovieResult Activity ViewModel SEARCH fun onAddToHistory() :SearchHistoryResult fun onSearchMovie() : SearchMovieResult Results ViewState

Activity ViewModel SEARCH

Activity ViewModel SEARCH Blade runner 2049 searchText.text.toString() From Android EditText View

Activity ViewModel SEARCH Blade runner 2049 searchText.text.toString() SearchMovieEvent( )

Activity ViewModel SEARCH Blade runner 2049 searchText.text.toString() SearchMovieEvent( ) sealed class MovieEvent { data class SearchMovieEvent( val searchedMovieTitle: String ) : MovieEvent() object AddToHistoryEvent : MovieEvent() 
 data class RestoreFromHistoryEvent( val movieFromHistory: Movie ) : MovieEvent() }

Activity ViewModel SEARCH Blade runner 2049 searchText.text.toString() SearchMovieEvent( )

Activity SEARCH Blade runner 2049 val searchMovieEvents: Observable = RxView.clicks(searchBtn) .map { } searchText.text.toString() SearchMovieEvent( )

Activity SEARCH Blade runner 2049 val searchMovieEvents: Observable = val addToHistoryEvents: Observable = RxView.clicks(searchResultImageView) .map { AddToHistoryEvent } val restoreFromHistoryEvents: Observable = historyItemClickSubject .map { RestoreFromHistoryEvent(it) }

Activity SEARCH Blade runner 2049 val searchMovieEvents: Observable val addToHistoryEvents: Observable val restoreFromHistoryEvents: Observable val events: Observable = Observable.merge( searchMovieEvents, addToHistoryEvents, restoreFromHistoryEvents )

Activity ViewModel SEARCH val events: Observable = Observable.merge( searchMovieEvents, addToHistoryEvents, restoreFromHistoryEvents ) Events

fun onRestoreFromHistory() :SearchMovieResult Activity ViewModel SEARCH fun onAddToHistory() :SearchHistoryResult fun onSearchMovie() : SearchMovieResult Events Results Step 3 Events -> Results ViewState

val events: Observable = Observable.merge( searchMovieEvents, addToHistoryEvents, restoreFromHistoryEvents )

val events: Observable = Observable.merge( searchMovieEvents, addToHistoryEvents, restoreFromHistoryEvents ) fun onSearchMovie( event SearchMovieEvent ): SearchMovieResult fun onAddToHistory( event AddToHistoryEvent ): SearchHistoryResult fun onRestoreF event Res ): SearchMovie a.k.a “Use cases”

val events: Observable = Observable.merge( searchMovieEvents, addToHistoryEvents, restoreFromHistoryEvents ) fun onSearchMovie( event SearchMovieEvent ): SearchMovieResult fun onAddToHistory( event AddToHistoryEvent ): SearchHistoryResult fun onRestoreF event Res ): SearchMovie

val events: Observable = Observable.merge( searchMovieEvents, addToHistoryEvents, restoreFromHistoryEvents ) fun onSearchMovie( event SearchMovieEvent ): SearchMovieResult fun onAddToHistory( event AddToHistoryEvent ): SearchHistoryResult fun onRestoreF event Res ): SearchMovie events.ofType(SearchMovieEvent::class.java).compose(onSearchMovie())

val events: Observable fun onSearchMovie( event SearchMovieEvent ): SearchMovieResult fun onAddToHistory( event AddToHistoryEvent ): SearchHistoryResult fun onRestoreF event Res ): SearchMovie events.ofType(SearchMovieEvent::class.java).compose(onSearchMovie()) events.ofType(AddToHistoryEvent::class.java).compose(onSearchMovie())

val events: Observable fun onSearchMovie( event SearchMovieEvent ): SearchMovieResult fun onAddToHistory( event AddToHistoryEvent ): SearchHistoryResult fun onRestoreF event Res ): SearchMovie events.ofType(SearchMovieEvent::class.java).compose(onSearchMovie()) events.ofType(AddToHistoryEvent::class.java).compose(onSearchMovie()) events.ofType(RestoreFromHistoryEvent::class.java).compose(onRestoreMovie

val events: Observable fun onSearchMovie( event SearchMovieEvent ): SearchMovieResult fun onAddToHistory( event AddToHistoryEvent ): SearchHistoryResult fun onRestoreF event Res ): SearchMovie events.ofType(SearchMovieEvent::class.java).compose(onSearchMovi events.ofType(AddToHistoryEvent::class.java).compose(onSearchMov events.ofType(RestoreFromHistoryEvent::class.java).compose(onRes return Observable.merge( ) ): SearchMovieResult ): SearchHistoryResult ): SearchMovie

) fun onSearchMovie( event SearchMovieEvent ): SearchMovieResult fun onAddToHistory( event AddToHistoryEvent ): SearchHistoryResult fun onRestoreF event Res ): SearchMovie events.ofType(SearchMovieEvent::class.java).compose(onSearchMovi events.ofType(AddToHistoryEvent::class.java).compose(onSearchMov events.ofType(RestoreFromHistoryEvent::class.java).compose(onRes return Observable.merge( ) ): SearchMovieResult ): SearchHistoryResult ): SearchMovie Observable

fun onSearchMovie( event SearchMovieEvent ): SearchMovieResult fun onAddToHistory( event AddToHistoryEvent ): SearchHistoryResult fun onRestoreF event Res ): SearchMovie .ofType(SearchMovieEvent::class.java).compose(onSearchMovi .ofType(AddToHistoryEvent::class.java).compose(onSearchMov .ofType(RestoreFromHistoryEvent::class.java).compose(onRes return Observable.merge( ) ): SearchMovieResult ): SearchHistoryResult ): SearchMovie sealed class MovieResult { data class SearchMovieResult( val movie: Movie ) : MovieResult() data class SearchHistoryResult val movieHistory: Movie ) : MovieResult() } Observable events. events. events.

fun onSearchMovie( event SearchMovieEvent ): SearchMovieResult fun onAddToHistory( event AddToHistoryEvent ): SearchHistoryResult fun onRestoreF event Res ): SearchMovie .ofType(SearchMovieEvent::class.java).compose(onSearchMovi .ofType(AddToHistoryEvent::class.java).compose(onSearchMov .ofType(RestoreFromHistoryEvent::class.java).compose(onRes ): SearchMovieResult ): SearchHistoryResult ): SearchMovie sealed class MovieResult { data class SearchMovieResult( val movie: Movie ) : MovieResult() data class SearchHistoryResult val movieHistory: Movie ) : MovieResult() } Observable ) Rx $ e e e Observable.merge( return events.publish { e ->

MovieResult Lce< > sealed class Lce { class Loading : Lce() data class Content( val packet: T ) : Lce() data class Error( val packet: T ) : Lce() } Loading Content (movie) Error Blog post on LCE: Modeling Data Loading in RxJava Google version: "Resource" class Observable

Observable< Lce< > .ofType(SearchMovieEvent::class.java).compose(onSea .ofType(AddToHistoryEvent::class.java).compose(onSe .ofType(RestoreFromHistoryEvent::class.java).compos ) e e e Observable.merge( return events.publish { e -> private fun eventsToResults( events: Observable ): Observable> { }

fun onRestoreFromHistory() :SearchMovieResult Activity ViewModel SEARCH fun onAddToHistory() :SearchHistoryResult fun onSearchMovie() : SearchMovieResult Events Results Last step ! Results -> ViewState ViewState

when (result) { // check LCE or type is Lce.Content -> { // check MovieResult type } is Lce.Loading -> { // … } is Lce.Error -> { // … } } Results ViewState Observable> results Observable

when (result) { // check LCE or type is Lce.Content -> { // check MovieResult type } is Lce.Loading -> { // … } is Lce.Error -> { // … } } Results ViewState val movie: Movie = result.packet.movie return@when viewState.copy( searchedMovieTitle = movie.title, searchedMovieRating = movie.ratingSummary, searchedMoviePoster = movie.posterUrl ) Observable> results Observable

when (result) { // check LCE or type is Lce.Content -> { // check MovieResult type // … } is Lce.Loading -> { // … } is Lce.Error -> { // … } } Results ViewState We want to accumulate note overwrite! Observable> results Observable

We want to accumulate note overwrite! data class MovieViewState( val searchBoxText: String, val searchedMovieTitle: String, val searchedMovieRating: String, val searchedMoviePoster: String, val adapterList: List ) Blade Runner 2049 Movie 1 Blade Movie 2 Movie 1 Movie 2 Movie 1 ✅ ✅

when (result) { // check LCE or type is Lce.Content -> { // check MovieResult type } is Lce.Loading -> { // … } is Lce.Error -> { // … } } Results Observable> ViewState val movie: Movie = result.packet.movie return@when viewState.copy( searchedMovieTitle = movie.title, searchedMovieRating = movie.ratingSummary, searchedMoviePoster = movie.posterUrl, searchedMovieReference = movie ) Observable> results

Results ViewState when (result) { // check LCE or type is Lce.Content -> { // check MovieResult type // … } is Lce.Loading -> { // … } is Lce.Error -> { // … } } results .scan(startingViewState) { accumulatedState, result -> Rx $ Observable> results Observable return This technique is also referred to as “reducing”

fun onRestoreFromHistory() :SearchMovieResult Activity ViewModel SEARCH fun onAddToHistory() :SearchHistoryResult fun onSearchMovie() : SearchMovieResult Events Results That’s it folks! ViewState

Resources Blog post on LCE: Modeling Data Loading in RxJava Google version: "Resource" class LCE modeling The State of Managing State with RxJava Unidirectional state https://jakewharton.com/the-state-of-managing-state-with-rxjava/ MVI patterns with Hannes Dorfmann http://hannesdorfmann.com/android/mosby3-mvi-1 Sample app https://github.com/kaushikgopal/movies-usf Movie Review Sample app https://tech.instacart.com/lce-modeling-data-loading-in-rxjava-b798ac98d80 https://github.com/googlesamples/android-architecture-components/blob/master/GithubBrowserSamp Rx by example – Volume 3 (the multicast edition) Rx sharing

✌ fragmentedpodcast.com @kaushikgopal kaush.co We're hiring mobile devs! tech.instacart.com

“Guided” Q&A

How does this make testing easier? What about savedInstanceState? Can we also handle this? How does this make debugging easier? What do you think about routing and navigation? What about activity rotation for Android apps? 1 2 6 7 3 Can you show me your tests? Are they meaningful? 8 Do I “need” Rx for this? 4 What are some of your favorite English movies? 9 With repeated ViewState rendering, 
 is performance a problem? 5