How to handle state serialization?

[yedem-steve]

I am pretty confused by the state serialization. When the app is run from background, it just initializes the current stack purely based on configurations. So that would mean, that everything has to be @Serializable and stored in the configuration which seems to contradict the fact that the configurations should be relatively small and not contain complex types. Is there some better mechanism for this in decompose?

For example I have a stack where user configures the data object to be created in several steps.

1. If I do it the way it is done in the example. Whenever decompose recreates the stack on Step2 for example, then the DataDraft will have property1 = null so the createData will fail.
2. The alternative is to make DataDraft serializable, and store it in every configuration, but that seems kinda wasteful. Or I can just store the properties directly in configurations like @Serializable data class StepN(val property1: String, ... , val propertyN-1: String) : Config, but that can also get pretty annoying with more properties.
3. I mean I could always just disable the configuration serialization, but that also isn't a good idea probably.

Sorry if it's a dumb question, maybe I just missed something in the docs or something. I am just wondering what is the "intended" way to handle this sort of stuff with decompose.

class CreateDataRootComponent(
    componentContext: ComponentContext,
) : ComponentContext by componentContext {

    private val service = Service()

    private val navigation = StackNavigation<Config>()

    private val data = DataDraft()

    val stack: Value<ChildStack<*, Child>> = childStack(
        source = navigation,
        serializer = Config.serializer(),
        initialConfiguration = Config.Step1,
        handleBackButton = true,
        childFactory = ::child,
    )

    private fun child(config: Config, componentContext: ComponentContext): Child =
        when (config) {
            is Config.Step1 -> Child.Step1Child(
                component = Step1Component(
                    componentContext = componentContext,
                    onNext = { property1 ->
                        data.property1 = property1
                        navigation.pushNew(Config.Step2)
                    }
                )
            )
            is Config.Step2 -> Child.Step2Child(
                component = Step2Component(
                    componentContext = componentContext,
                    onNext = { property2 ->
                        data.property2 = property2
                        navigation.pushNew(Config.Confirm)
                    }
                )
            )
            is Config.Confirm -> Child.ConfirmChild(
                component = ConfirmComponent(
                    componentContext = componentContext,
                    onConfirm = {
                        service.createData(
                            property1 = data.property1 ?: throw IllegalStateException("property1 is missing"),
                            property2 = data.property2 ?: throw IllegalStateException("property2 is missing")
                        )
                    }
                )
            )
        }

    sealed class Child {
        class Step1Child(val component: Step1Component) : Child()
        class Step2Child(val component: Step2Component) : Child()
        class ConfirmChild(val component: ConfirmComponent) : Child()
    }


    @Serializable
    private sealed interface Config {
        data object Step1 : Config
        data object Step2 : Config
        data object Confirm : Config
    }

    private data class DataDraft(
        var property1: String? = null,
        var property2: String? = null,
    )
}

class Service {
    fun createData(
        property1: String,
        property2: String,
    ) {
        // do stuff
    }
}

class Step1Component(
    componentContext: ComponentContext,
    val onNext: (String) -> Unit,
) : ComponentContext by componentContext

class Step2Component(
    componentContext: ComponentContext,
    val onNext: (String) -> Unit,
) : ComponentContext by componentContext

class ConfirmComponent(
    componentContext: ComponentContext,
    val onConfirm: () -> Unit,
) : ComponentContext by componentContext

[arkivanov]

The idea is to treat component configurations as navigation arguments. Configurations should contain minimum amount of data required for component creation. The rest can be passed via constructors.

In your example however, you don't pass any data into child components. You accumulate data from multiple steps and use that after the final step confirmation. So you should either make DataDraft serializable and save it via StateKeeper (e.g. by using the saveable {} extension function), or carry properties with child configurations. I.e. add property1 to Step2 and add property1 and property2 to Confirm. You may notice that the second option duplicates property1 in Step2 and Confirm. They both serialized because you push screens, not replace. This should be fine if the size is small. Plus you will not need to check for missing data (type safety). But if the size might be large, you might need to reconsider the approach and maybe use a persistent storage.

Another possible way is to have property1 in Step2 and only property2 in Confirm. Then, since all the screens are in the stack, you can read properties from the stack. But then again, you will need to check for missing data.

[yedem-steve]

Ah, saveable is what I missed. That is exactly what I was looking for. Otherwise picking the properties from the stack (one property per configuration) is also pretty clever. Thanks for clarifying.

[arkivanov]

Yeah, you might find this doc useful: https://arkivanov.github.io/Decompose/component/state-preservation/