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
- 850