Compose & マルチプラットフォーム連携

このページで説明するヘルパーは monaka-compose アーティファクトによって提供されます：

implementation("dev.gmvalentino.monaka:monaka-compose:<version>")

---

rememberStore — コンポジションスコープストア

@Composable
fun CounterScreen() {
    val store = rememberStore { scope ->
        CounterStateMachine(scope, counterRepository)
    }
}

---

toViewStore — ライフサイクル対応ステート収集

@Composable
fun CounterScreen(store: Store<CounterState, CounterAction, CounterEffect>) {
    val viewStore = store.toViewStore()

    Text("Count: ${viewStore.state.count}")
    Button(onClick = { viewStore.dispatch(CounterAction.Increment) }) {
        Text("Increment")
    }
}

---

handleEffects — ライフサイクル対応エフェクト収集

@Composable
fun LoginScreen(store: Store<LoginState, LoginAction, LoginEffect>, navController: NavController) {
    store.handleEffects { effect ->
        when (effect) {
            LoginEffect.NavigateToHome  -> navController.navigate("home")
            LoginEffect.NavigateToLogin -> navController.navigate("login")
            is LoginEffect.ShowError    -> showSnackbar(effect.message)
        }
    }

    val viewStore = store.toViewStore()
}

---

bindLifecycle — 自動ライフサイクル転送

@Composable
fun TimerScreen(store: Store<TimerState, TimerAction, TimerEffect>) {
    store.bindLifecycle()
}

---

render — インラインステートレンダリング

viewStore.state.render<LoginState.Authenticated> {
    Text("Welcome, ${renderState.username}!")
}

viewStore.state.render<LoginState.Error> {
    Text("Error: ${renderState.message}", color = Color.Red)
}