UiState は入力から導出する

UI = f(State) は、宣言的 UI の基本的な考え方です。
では、UIからのActionによってStateをどう変えるのでしょうか?
ルールはシンプルです。
UI Action から public な UiState を直接変更しない。
UI Action は ViewModel が持つ private な入力を更新します。
そして、UiState はその入力から導出します。
UI Action
↓
Private Flow
↓
UiState
↓
UI
例えば、検索画面なら次のように書けます。
private val _query = MutableStateFlow("")
val uiState = combine(
_query,
repository.items
) { query, items ->
UiState(
query = query,
items = items
)
}
fun onQueryChanged(query: String) {
_query.value = query
}
次のように UiState を直接変更することもできます。
fun onQueryChanged(query: String) {
_uiState.update {
it.copy(query = query)
}
}
この場合、UI Action 自身が画面の State を管理することになります。
一方、private な入力を更新するだけなら、責務が明確になります。
UI Action
↓
入力を変更する
↓
UiState を導出する
↓
UI を描画する
つまり、
UiState = f(Inputs)
であり、
UI Action → UiState を変更する
ではありません。
UI Action の役割は、「何が起きたか」を ViewModel に伝えることです。
そして、「その結果どのようなUiStateになるか」は Flow の依存関係によって決まります。
UI Action は UiState を変更する命令ではなく、入力を変更するトリガーである。
🧑🏻💻 参考
Related Categories : Android・Developmemt・JetpackCompose・KMP・Kotlin・Kotlin Multiplatform Mobile・Recommended・Trending