Accessing ViewModel inside component {Question}

[Drabu]

How can i access viewmodel in component?

[Drabu]

I'm using koin for DI. I am trying to inject the view model but it fails everytime
Koin().get(CreateOrderViewModel::class), not just viewmodel but any class fails with the following message:
org.koin.core.error.NoBeanDefFoundException: No definition found for type 'network.FlashRepo'. Check your Modules configuration and add missing type and/or qualifier!

While this works when injecting stuff to VM's and Composable functions but it fails when i try to do the same with Components

[arkivanov]

Decompose doesn't support and doesn't have such a concept as ViewModel. Instead, Decompose uses InstanceKeeper API for instance retaining. Another possible option is to use retained components, though not quite recommended.

Re: org.koin.core.error.NoBeanDefFoundException: No definition found for type 'network.FlashRepo

I'm not quite familiar with Koin, but this error looks like an issue in your DI setup, unrelated to Decompose - it can't inject FlashRepo.

[OsmanMusse]

Great explanation, and fast reply Thanks. I had this issue too.

[Drabu]

i intend to use component in place of view-model and just like VM's we need to inject instances to component. Is there any documentation that explains how to use DI within root component?

[arkivanov]

I intend to use component in place of view-model

This sounds like a good plan!

Is there any documentation that explains how to use DI within root component

With Decompose you have the freedom of injecting things as you wish, as components are just normal classes. You can manually pass things via constructors.

To avoid possible prop drilling, you can also find the following Assisted Inject pattern useful.

import com.arkivanov.decompose.ComponentContext
import com.arkivanov.decompose.childContext
import com.arkivanov.decompose.router.slot.ChildSlot
import com.arkivanov.decompose.router.slot.SlotNavigation
import com.arkivanov.decompose.router.slot.activate
import com.arkivanov.decompose.router.slot.childSlot
import com.arkivanov.decompose.value.Value
import kotlinx.serialization.Serializable

//region RootComponent

interface RootComponent {
    val intermediateComponent: IntermediateComponent
}

class DefaultRootComponent(
    componentContext: ComponentContext,
    intermediateComponentFactory: IntermediateComponent.Factory,
) : RootComponent, ComponentContext by componentContext {

    override val intermediateComponent: IntermediateComponent =
        intermediateComponentFactory(childContext("IntermediateComponent"))
}

//endregion

//region IntermediateComponent

interface IntermediateComponent {

    val nestedComponent: Value<ChildSlot<*, NestedComponent>>

    fun showNestedComponent(someId: String)

    fun interface Factory {
        operator fun invoke(componentContext: ComponentContext): IntermediateComponent
    }
}

class DefaultIntermediateComponent(
    componentContext: ComponentContext,
    nestedComponentFactory: NestedComponent.Factory,
) : IntermediateComponent, ComponentContext by componentContext {

    private val nav = SlotNavigation<Config>()

    override val nestedComponent: Value<ChildSlot<*, NestedComponent>> =
        childSlot(
            source = nav,
            serializer = Config.serializer(),
            childFactory = { config, ctx -> nestedComponentFactory(componentContext = ctx, someId = config.someId) },
        )

    override fun showNestedComponent(someId: String) {
        nav.activate(Config(someId = someId))
    }

    @Serializable
    private data class Config(
        val someId: String,
    )
}

//endregion

//region NestedComponent

interface SomeDependency

interface NestedComponent {

    fun interface Factory {
        operator fun invoke(componentContext: ComponentContext, someId: String): NestedComponent
    }
}

class DefaultNestedComponent(
    componentContext: ComponentContext,
    someDependency: SomeDependency,
    someId: String,
) : NestedComponent, ComponentContext by componentContext

//endregion

With the Assisted Inject pattern you can observe that even though DefaultNestedComponent requires SomeDependency, none of the parent components are aware of that dependency.

You can also check decompose-dagger-sample, which utilizes the Assisted Inject patter with Dagger. You could try adapting that with Koin. You can also check the Used By list for projects with Koin.

[OsmanMusse]

Hi arkivanov, great explanation above, just wanted to ask is this still the assisted inject pattern but without a dependency injection library

[arkivanov]

Yes, the sample above demonstrates the Assisted Inject pattern without a DI framework. It can be injected manually as follows:

class MainActivity : AppCompatActivity() {
    private val someDependency by lazy { SomeDependencyImpl() }

    private val nestedComponentFactory =
        NestedComponent.Factory { componentContext, someId ->
            DefaultNestedComponent(
                componentContext = componentContext,
                someDependency = someDependency,
                someId = someId,
            )
        }

    private val intermediateComponentFactory =
        IntermediateComponent.Factory { componentContext ->
            DefaultIntermediateComponent(
                componentContext = componentContext,
                nestedComponentFactory = nestedComponentFactory,
            )
        }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val root =
            DefaultRootComponent(
                componentContext = defaultComponentContext(),
                intermediateComponentFactory = intermediateComponentFactory,
            )

        setContent {
            // ...
        }
    }
}

[OsmanMusse]

Thanks for the fast reply, makes sense :D