How to do external state management for cross-component reactive state or extracting reusable stateful logic?

[sreekar339339]

I think the docs mention state cannot be declared outside of the component in module scope. If so, how can external state management be done for cross-component reactive state or extracting reusable stateful logic?

[trueadm]

I have spent years working with both the simplest and complex apps in existence, and there has never been a need to have module based state. It sounds appealing, but it just doesn't work and is a complete anti-pattern. You can have external state and consume it as you do normally and then make it reactive in your components. However, maybe I'm missing some context here, so feel free to share if that's the case.

[levibassey]

I have spent years working with both the simplest and complex apps in existence, and there has never been a need to have module based state. It sounds appealing, but it just doesn't work and is a complete anti-pattern. You can have external state and consume it as you do normally and then make it reactive in your components. However, maybe I'm missing some context here, so feel free to share if that's the case.

What about a context api equivalent for ripple?

[trueadm]

That’s on my todo list. It’ll likely work like Solid/React rather than Svelte

[sreekar339339]

I have spent years working with both the simplest and complex apps in existence, and there has never been a need to have module based state. It sounds appealing, but it just doesn't work and is a complete anti-pattern. You can have external state and consume it as you do normally and then make it reactive in your components. However, maybe I'm missing some context here, so feel free to share if that's the case.

By external state, I meant something like Redux or like React's custom hooks that contain stateful logic outside component's scope. I think you said earlier that classes can have reactive variables, so I guess that is one way of having external state which is de-coupled from components. Something like this https://svelte.dev/docs/svelte/$state#Passing-state-across-modules .

[trueadm]

You'll be able to pass around reactivity in objects using $ prefixed properties, you can also destructure them at the other side. This includes tuples!

[sreekar339339]

Ok, so variables can be module scoped, and their properties can be reactive with $ sign. The variable itself can’t be reactive with $ sign. Right?

[trueadm]

Reactive variables cannot be module scoped, as that means they are unowned, reactive state must be owned by a component – as we're not using signals, and thus the compiler assigns state to the correct component. You can however create state in a function that is called from the component, and this will be associated. In the future, we'll also allow reactive properties on class too.

[wobsoriano]

Wrote a Jotai Ripple integration for global state mgmt! https://github.com/wobsoriano/jotai-ripple