Hey guys, using MVIKotlin with KotlinJS and React ...

# mvikotlin

[Nikola Milovic]

Hey guys, using MVIKotlin with KotlinJS and React for web, anyone got a good setup for functional components and handling state/ passing props? I am trying to do something like this

external interface RootProps : PropsWithChildren {
    var component: Root
}

val RootC = fc<RootProps> { props ->
    val (routerState, _) = useState(props.component.routerState.value)

    val child: Root.Child = routerState.activeChild.instance

And I'd call this way in my toplevel app component

override fun RBuilder.render() {
        RootC {
            attrs {
                this.component = root
            }
        }
    }

But this doesn't seem to pickup on the state val (routerState, _) = useState(props.component.routerState.value) and doesn't update the component. No composables, so cannot use the ValueExt from the samples

[Arkadii Ivanov]

There are a few samples available:

https://github.com/arkivanov/MVIKotlin/tree/master/sample/todo-app-js

https://github.com/arkivanov/Decompose/tree/master/sample/counter/app-js (not MVIKotlin but still might be useful)

[Arkadii Ivanov]

Seems like your question is more related to Decompose rather than MVIKotlin. Here is an example: https://github.com/arkivanov/Decompose/blob/master/sample/counter/shared/src/jsMain/kotlin/com/arkivanov/sample/counter/shared/root/RootR.kt

[Nikola Milovic]

Yeah I used that kind of approach with RComponents and renderable children but I am more comfortable with functional components as I've used them in React as well

I got this to work

fun <T : Any> Value<T>.subscribeAsState(): T {
    val (state, setState) = useState<T>(this.value)

    useEffectOnce {
        val observer: ValueObserver<T> = {
            setState(it)
        }

        subscribe(observer)

        cleanup {
            unsubscribe(observer)
        }
    }

    return state
}

And I just use it like this

val RootC = fc<RootProps> { props ->
    val routerState = props.component.routerState.subscribeAsState()

    val child: Root.Child = routerState.activeChild.instance

Are there any issues that stick out at first glance? I suck at this

[Arkadii Ivanov]

Looks cool! 🔥