So I'm almost 100% certain this ain't the correct ...
# compose-desktop
y
So I'm almost 100% certain this ain't the correct place to ask. but I'm not really sure where else to ask, so here it goes. I'm using Jetpack compose for desktop and I'm using
decompose
for my navigation and to decouple my logic from my UI, however I'm little bit stumpped on this one problem, two pages I have need to share same state and I'm struggling to figure out how to pass it down to both of them, the closest I got was to put it in my NavComponent class and try to pass it down through the child
render
functions, I reckon if i tinckered abit more, I could maybe of got it too work, however this was getting really ugly and hard to maintain which makes me feel like I'm doing it wrong, so I reverted the changes back and I'm now asking for any examples or further advice on how to aproach something like this with
decompose
Also If you're confused about what decompose is, then checkout it here <https://github.com/arkivanov/Decompose>
c
I don't use decompose but just sharing my general thought on your problem because I feel like people hit this problem a lot on Android. Problem = I have screen a and screen b and I need them to share some state. Realistically the only thing you can do is to send this state back and forth and try to sync it up and try not to mess it up Or You can just put the state into the next highest shared scope by the two screens and use it that way.
j
Yes, the second approach is correct. Hoist the state up into the application level. Often, your application will have a database or some backend where you represent your application's data. Your data should be hoisted up to this level, not remembered by your composable functions.
🎉 2
y
@jim @Colton Idle Hey thank you both for your advice and yes both of your answers are what I was trying to achieve before and what I was trying to do, but I think I'll try to be more clear, hoisting the state on a (jetpack) composable is something I have done everywhere on this application, the problem I'm having is hoisting n passing down state between a (decompose) logic component. Hence my explaining me trying to work around this by passing it through the childrens render functions (which is where you place the jetapack compose composables). which I almost got to work, but felt like the wrong way of doing things
@Arkadii Ivanov hopefully you don't mind me mentioning you but I think you're the correct person to ask (not like I'm not open for others helping or anything)
a
Hi. Do you support any non-compose targets like iOS or JS?
y
Hi, no I'm currently only support compose for desktop only
(and plan to keep it dat way for the most part)
a
In this case you can pass shared state to children as follows:
class MyChild(val state: State<SharedState>) {}
If you need to put children in separate Gradle modules then I recommend to define separate state data class for each child, to avoid coupling. And pass it as
Value<State>
. In the parent you can map it as follows:
state.map { ... }
.
y
Ok, So this is intresting, I make a child class (
MyChild
) that I pass the state through it, but then how do I pass that class to both of my logic components (classes), or do you mean I pass the state through the logic components class constructor? and then pass it down through the componentFactory function I supply to the router?
I think it would help if there was also some code I could look at, seeing this be done
a
Yes, I mean pass it via constructors (dependency injection).
y
Yep, Awesome. I think I understand what's going on here, thank you for your help so far. 🙂 I just have one more question, as I'm running into this error
Copy code
Exception in thread "AWT-EventQueue-0" java.lang.NoSuchFieldError: Companion
I only started getting this error from when I updated (decompose) from v0.1.9 to v0.2.1. the stacktrace is pointing to this lines of code here...
Copy code
fun main() = Window(
    title = "Cache Monkey",
    size = IntSize(1100, 635),
    undecorated = true,
    resizable = true,
) {
    MaterialTheme {
        Surface(
            color = Color(32, 32, 32),
            modifier = Modifier.fillMaxSize()
        ) {
            rememberRootComponent(factory = ::NavComponent).render()
        }
    }
}
what the current NavComponent Looks like <https://pastecord.com/ezyroqidih.kt> and what the full error is saying <https://pastecord.com/akimezuqof.apache>
a
Looks like binary compatibility in Compose was broken (again?). Decompose
0.2.1
is compiled against Compose
0.4.0-build177
. Please make sure you are using this version.
y
Yep that worked thank you so much ❤️
👍 1