Reduxで
アンドロイド開発環境

自己紹介

モバイル愛好家 (Android / iOS)

Kotlin大好き / Swift + オープンソースプロジェクト

2018年メルカリ(メルペイ)入社 :)

github.com/kittinunf

@kittinunf

また新たなアーキテクチャ?

プログラミングとは
抽象化

data class Car(
  val make: String, 
  val wheel: Int, 
  val color: Color
)

val car1 = Car("Honda", 4, Color.WHITE)

val car2 = Car("Toyota", 8, Color.RED)

State?

class View {
  // 3 VISIBLE, INVISIBLE, GONE
  var visibility: Int,
  // 2 focused, not
  var focused: Boolean,
  // 2 activated, not
  var activated: Boolean,
   // 2 enabled, not
  var enabled: Boolean
}
// possibility 3 * 2 * 2 * 2

MV(P)(VM)

        view.chatListSignals
          .map { itemCount -> itemCount == 0 }
          .subscribe { emptyList ->
            view.setChatListViewVisibility(if (emptyList) GONE else VISIBLE)
            view.showEmptyState(emptyList)
        }.addTo(disposables)

        paginator.results.subscribe { response ->
            showConversationResults(response)
        }.addTo(disposables)

        paginator.errors
                .subscribe(view::showError)
                .addTo(disposables)

        view.onLoadMoreSignals.subscribe {
            paginator.loadNext()
        }.addTo(disposables)

        view.onDeleteSignal
                .flatMap { chatMembership -> repository.leaveChat(chatMembership.chat.id) }
                .filter { response -> !response.isSuccessful }
                .subscribe(view::showError)
                .addTo(disposables)

        view.onLeaveSignal
                .flatMap { chatMembership -> repository.leaveChat(chatMembership.chat.id) }
                .filter { response -> !response.isSuccessful }
                .subscribe(view::showError)
                .addTo(disposables)

Stateを
作成することは簡単

 しかしそのStateを維持することが
難しい

ならば、抽象化をし、
状態を保てば良いのでは?

Reduxの概念

3つの原則

ReduxはStateの変換の予測
を容易にします

信頼すべき情報源が一つ

Stateは読み取り専用

純粋な関数により変換が行われる

Reduxの概念

Action

State

Store

Reducer

Action

ユーザーからのペイロードデータ / Screen から Store

sealed class Action

class Load : Action
class ShowResult(list: List<Data>) : Action
class ShowError(error: String) : Action

State

信頼できる一つの情報源で
画面を表示

data class State(
  // represent list of data on the screen
  data: List<Data>, 
  loading: Boolean,
  error: String?
)

// or you can do even better with sealed class
sealed class State

object Loading : State
class Success(list: List<Data>)
class Failure(reason: String)

Reducer

単純な関数でStateを変換

val reducer = object : Reducer<State> {
  override fun reduce(currentState: State, action: Action):
    State {
    
    return when (action) { 
      Loading -> currentState.copy(loading = true)
      is ShowResult -> currentState.copy(
                         list = action.list, 
                         loading = false
                       )  
      is ShowError -> currentState.copy(
                         error = action.reason, 
                         loading = false
                       )
    }
  }
}

Store

Storeはすべてを結びつける
役割があります

Store

Reducer

View (consumer)

Viewの更新の予測が容易に 

 

store.states.subscribe { state ->
  // state is a snapshot of thing on the screen 
  // at any point in time
  
  if (loading == true) {
    recyclerView.setVisibility = View.GONE
    loadingView.setVisibility = View.VISIBLE
  } else {
    recyclerView.setVisibility = View.VISIBLE
    loadingView.setVisibility = View.GONE

    adapter.update(state.list)
    adapter.notifyDataSetChanged()
  }
  
}

全部の要素を合わせてみると…

Store

Reducer

State (新)

State

Action

「ちょっと待って、
どのライブラリを
使用しているのか
教えてくれないの?」

ライブラリを自分で作成してもいいと思います!

実は今日のデモ用に自分のライブラリを作成しました

デモ

デブツール?

もし僕がASで
できると言ったら?

またデモ?

Q & A

Copy of Redux Powered Android Dev

By Yuko CHEE

Copy of Redux Powered Android Dev

  • 108
Loading comments...