Jetpack Compose +軌道MVIの実装

Jetpack Compose + Orbit MVIを使用してPOK - Me - libaryアプリケーションを作成しました.軌道MVIは、それを試して使いやすいです.


リンク
このサンプルソースコード

https://github.com/kaleidot725/PokemonLibraryWithJetpackCompose

について

https://developer.android.com/jetpack/compose

について軌道

https://orbit-mvi.org

機能

POKのMONデータを管理します.

リストに複数のpokの紋を表示します.

POKの詳細を表示します.

建築
このアプリケーションのアーキテクチャは、MVVM +リポジトリのパターンに基づいています.しかし、導入状態管理はMVIを使用します、なぜならば、導入されたJetpackはMVIを軌道に入れて、作成します.


モジュール
このアプリケーションは、マルチモジュール構造から成ります.つのモジュールがあり、各モジュールは以下の図で説明した役割を果たします.
名称
内容
アプリ
ビュービューとビューモデルを管理するビューモデル.
ドメイン
ビジネスロジックを処理するためにusecaseを格納します.
データ
ストアリポジトリとDAOはPOKのMONデータベースを管理する.

図書館
このアプリケーションは、下の図のライブラリによって作成されます.
名称
リンク
公院
https://insert-koin.io
ジェットパック
https://developer.android.com/jetpack/compose
ナビゲーション作成
https://developer.android.com/jetpack/compose/navigation
軌道mvi
https://orbit-mvi.org
コイル
https://coil-kt.github.io/coil/
部屋
https://developer.android.com/training/data-storage/room?hl=ja
コールリン
https://github.com/Kotlin/kotlinx.serialization
ポケネゴンポケデックス
https://github.com/Biuni/PokemonGO-Pokedex

UIにおけるデータフロー
下の図に示すように、このアプリケーションのデータフローは無指向性です.

MVIビューはMVIモデルにアクション(意図)を送信します.

MVIモデルは、受信したアクション

USEaseはPOK PERE MONデータを取得するためにリポジトリにアクセスします.

UseCaseはmviモデルにPOK PEN MONデータを返します.

MVIモデルはPOK PEN MONデータから新しい状態を作成します.

MVIモデルはMVIビューに新しい状態または新しいイベントを作成します.

このアプリケーションデータフローは、軌道MVIによって意味されます.( MVIビューまたはMVIモデルを軌道MVIを使用して作成する方法の詳細については、確認してくださいhere .)

MVIモデル

data class InitState(
    val status: UiStatus? = null
)

sealed class InitSideEffect {
    object Completed : InitSideEffect()
}

class InitViewModel(
    private val fetchAllPokemonUseCase: FetchAllPokemonUseCase
) : ContainerHost<InitState, InitSideEffect>, ViewModel() {
    override val container = container<InitState, InitSideEffect>(
        InitState()
    )

    init {
        fetchData()
    }

    fun retry() {
        if (container.stateFlow.value.status != UiStatus.Loading) {
            fetchData()
        }
    }

    private fun fetchData() {
        intent {
            reduce { state.copy(status = UiStatus.Loading) }
            if (fetchAllPokemonUseCase()) {
                reduce { state.copy(status = UiStatus.Success) }
                postSideEffect(InitSideEffect.Completed)
            } else {
                reduce { state.copy(status = UiStatus.Failed()) }
            }
        }
    }
}

MVIビュー

@Composable
fun InitPage(
    viewModel: InitViewModel,
    onCompleted: () -> Unit
) {
    val state by viewModel.container.stateFlow.collectAsState()

    LaunchedEffect(viewModel) {
        viewModel.container.sideEffectFlow.collect {
            when (it) {
                is InitSideEffect.Completed -> onCompleted()
            }
        }
    }

    Scaffold {
        Box(modifier = Modifier.fillMaxSize()) {
            when (state.status) {
                UiStatus.Loading -> {
                    DownloadingMessage(
                        modifier = Modifier
                            .wrapContentSize()
                            .align(Alignment.Center)
                    )
                }
                is UiStatus.Failed -> {
                    DownloadRetryMessage(
                        onRetry = { viewModel.retry() },
                        modifier = Modifier
                            .wrapContentSize()
                            .align(Alignment.Center)
                    )
                }
                UiStatus.Success -> Unit
            }
        }
    }
}

参考文献

Koin | Jetpack Compose

Navigation Compose | Navigating With Compose

Orbit MVI | Android ViewModel module

MVI Architecture - Android Tutorial for Beginners - Step By Step Guide

Coil | Jetpack Compose