Daniele B
09/17/2020, 5:54 PMAndroid
and iOS
, I was able to run the shared ViewModel on Web
too!
I admit I never used React
before, but with Kotlin it was incredibly easy to setup it up!
I was actually thinking to use Vue.js
for the web, because I was interested in a lightweight web framework, whose main capability is to provide a declarative UI, similar to what Compose and SwiftUI provide in mobile.
But I was not aware of how simple Kotlin makes it to work with React! I am still astonished now.
Kotlin hides most React complexity, and Android Studio even spins a node.js server on localhost to test the app, with no setup!
My project uses a shared ViewModel, which means that changes to the app state only happen in the shared code.
Such changes are then propagated via StateFlow
to the platform-specific app code.
In Kotlin/React it’s as simple as this to observe the app state changes via StateFlow:
fun myAppState() : AppState {
val appDependencies = useContext(AppDependenciesContext)
val (state, setState) = useState(appDependencies.coreModel.stateFlow.value)
useEffectWithCleanup {
val job = appDependencies.coreModel.stateFlow.onEach { setState(it) }.launchIn(GlobalScope)
return@useEffectWithCleanup { job.cancel() }
}
return state
}
Big Chungus
09/17/2020, 7:14 PMDaniele B
09/17/2020, 7:17 PMBig Chungus
09/17/2020, 7:18 PMDaniele B
09/17/2020, 7:18 PMBig Chungus
09/17/2020, 7:26 PMankushg
09/17/2020, 7:41 PMDaniele B
09/17/2020, 8:04 PMankushg
09/17/2020, 9:35 PMsealed class ViewState
?
Or do you use a different ViewModel for each screen and maybe one big ViewModel to represent the global nav state?Daniele B
09/17/2020, 9:41 PMKurt Renzo Acosta
09/17/2020, 9:47 PMDaniele B
09/17/2020, 9:49 PMKurt Renzo Acosta
09/17/2020, 9:52 PMnavigateToScreen2
then the view layer is just observing it and doing a navController.navigate(R.id.action)
or on iOS, do a navigate via coordinator. Is this the same thing you’re referring to?Daniele B
09/17/2020, 9:55 PMnavController.navigate(R.id.action)
it feels like you are using the traditional Android View system.Kurt Renzo Acosta
09/17/2020, 10:02 PMDaniele B
09/17/2020, 10:03 PMKurt Renzo Acosta
09/17/2020, 10:04 PMDaniele B
09/17/2020, 10:06 PMKurt Renzo Acosta
09/17/2020, 10:09 PMDaniele B
09/17/2020, 10:13 PMKurt Renzo Acosta
09/17/2020, 10:17 PMDaniele B
09/17/2020, 10:21 PMdarkmoon_uk
09/18/2020, 8:02 AMDaniele B
09/20/2020, 2:31 PMexternal interface ViewModelProps : RProps {
var viewModel : CoreViewModel
}
val App = functionalComponent<ViewModelProps> { props ->
val model = props.viewModel
val (state, setState) = useState(model.stateFlow.value)
useEffectWithCleanup {
val job = model.stateFlow.onEach {
if (it != state) {
setState(it)
}
}.launchIn(GlobalScope)
return@useEffectWithCleanup { job.cancel() }
}
}
It’s important to check if the state value is different before calling setState().
Otherwise each rendering always happens twice.