mcpField
M
mvi-architecture

mvi-architecture

github.com/ahmed3elshaer開発6642 回インストール19 週間前に更新
リポジトリ

mvi-architecture について

mvi-architecture は、Android アプリの単方向データフローを解説するスキルです。状態、インテント、副作用、ViewModel と UI の連携を扱い、ロジックのテスト例も示します。

主な機能

  1. 01単方向データフロー
  2. 02状態とインテントのモデル化
  3. 03副作用の処理
  4. 04ViewModel と UI の連携
  5. 05状態遷移のテスト

活用シーン

  1. 01Android 画面ロジックの構成
  2. 02ユーザー操作と UI 状態のモデル化
  3. 03ナビゲーションや Snackbar の副作用処理
  4. 04ViewModel の動作テスト

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/ahmed3elshaer/everything-claude-code-mobile --skill mvi-architecture

インストール後、Claude Code で/mvi-architectureを入力して読み込まれたか確認します。

詳細

MVI アーキテクチャ

Android 向けの単方向データフローアーキテクチャです。

コアコンセプト

Intent → ViewModel → State → UI
   ↑                        │
   └────────────────────────┘

状態

@Immutable
data class HomeState(
    val isLoading: Boolean = false,
    val items: List<Item> = emptyList(),
    val error: ErrorState? = null,
    val searchQuery: String = ""
) {
    sealed interface ErrorState {
        data class Network(val message: String) : ErrorState
        data object Unauthorized : ErrorState
    }
}

インテント

sealed interface HomeIntent {
    object LoadItems : HomeIntent
    object Refresh : HomeIntent
    data class Search(val query: String) : HomeIntent
    data class ItemClicked(val id: String) : HomeIntent
    object ClearError : HomeIntent
}

副作用

sealed interface HomeSideEffect {
    data class NavigateToDetail(val itemId: String) : HomeSideEffect
    data class ShowSnackbar(val message: String) : HomeSideEffect
    object NavigateToLogin : HomeSideEffect
}

ViewModel

class HomeViewModel(
    private val getItemsUseCase: GetItemsUseCase
) : ViewModel() {

    private val _state = MutableStateFlow(HomeState())
    val state: StateFlow<HomeState> = _state.asStateFlow()

    private val _sideEffects = Channel<HomeSideEffect>(Channel.BUFFERED)
    val sideEffects: Flow<HomeSideEffect> = _sideEffects.receiveAsFlow()

    fun onIntent(intent: HomeIntent) {
        when (intent) {
            is HomeIntent.LoadItems -> loadItems()
            is HomeIntent.Refresh -> loadItems(refresh = true)
            is HomeIntent.Search -> search(intent.query)
            is HomeIntent.ItemClicked -> {
                viewModelScope.launch {
                    _sideEffects.send(HomeSideEffect.NavigateToDetail(intent.id))
                }
            }
            is HomeIntent.ClearError -> _state.update { it.copy(error = null) }
        }
    }

    private fun loadItems(refresh: Boolean = false) {
        viewModelScope.launch {
            if (!refresh) _state.update { it.copy(isLoading = true) }
            
            getItemsUseCase()
                .onSuccess { items ->
                    _state.update { it.copy(isLoading = false, items = items, error = null) }
                }
                .onFailure { error ->
                    _state.update { it.copy(isLoading = false, error = mapError(error)) }
                }
        }
    }
    
    private fun mapError(error: Throwable): HomeState.ErrorState {
        return when (error) {
            is UnauthorizedException -> HomeState.ErrorState.Unauthorized
            else -> HomeState.ErrorState.Network(error.message ?: "Unknown error")
        }
    }
}

UI との統合

@Composable
fun HomeScreen(
    viewModel: HomeViewModel = koinViewModel(),
    onNavigateToDetail: (String) -> Unit,
    onNavigateToLogin: () -> Unit
) {
    val state by viewModel.state.collectAsStateWithLifecycle()
    val snackbarHostState = remember { SnackbarHostState() }
    
    // Handle side effects
    LaunchedEffect(Unit) {
        viewModel.sideEffects.collect { effect ->
            when (effect) {
                is HomeSideEffect.NavigateToDetail -> onNavigateToDetail(effect.itemId)
                is HomeSideEffect.ShowSnackbar -> snackbarHostState.showSnackbar(effect.message)
                is HomeSideEffect.NavigateToLogin -> onNavigateToLogin()
            }
        }
    }
    
    // Load data
    LaunchedEffect(Unit) {
        viewModel.onIntent(HomeIntent.LoadItems)
    }
    
    HomeContent(
        state = state,
        onIntent = viewModel::onIntent,
        snackbarHostState = snackbarHostState
    )
}

@Composable
private fun HomeContent(
    state: HomeState,
    onIntent: (HomeIntent) -> Unit,
    snackbarHostState: SnackbarHostState
) {
    Scaffold(
        snackbarHost = { SnackbarHost(snackbarHostState) }
    ) { padding ->
        when {
            state.isLoading -> LoadingIndicator()
            state.error != null -> ErrorContent(
                error = state.error,
                onRetry = { onIntent(HomeIntent.LoadItems) }
            )
            else -> ItemList(
                items = state.items,
                onItemClick = { onIntent(HomeIntent.ItemClicked(it)) }
            )
        }
    }
}

テスト

@Test
fun `when LoadItems succeeds, state contains items`() = runTest {
    val items = listOf(Item("1", "Test"))
    coEvery { getItemsUseCase() } returns Result.success(items)
    
    viewModel.state.test {
        awaitItem() // Initial
        
        viewModel.onIntent(HomeIntent.LoadItems)
        
        awaitItem().isLoading shouldBe true
        awaitItem().items shouldBe items
    }
}

覚えておきましょう:MVI = 予測可能な状態、テスト可能なロジック、デバッグしやすいフローです。

コメント