SolidJS•2y ago

Listening to all changes in an array or object in a store

Hi! I have a store that has arrays and objects inside it. I want to listen to all changes in a tree. For instance, suppose this is my store:

{
    "array": [
        { "name": "object1" },
        { "name": "object2" }
    ]
}

{
    "array": [
        { "name": "object1" },
        { "name": "object2" }
    ]
}

and I want to use the on helper to listen to this array such that whenever array, array[n] or array[n].name changes, my effect will be called. Is there some way to do that?

8 Replies

thetarnav•2y ago

tracking in solid stores is based on property access, so you simply need to access all properties you want to track 🤷‍♂️

thetarnav•2y ago

We've recently added a helper for that to solid-primitives: https://github.com/solidjs-community/solid-primitives/tree/main/packages/deep#deepTrack But the idea is the same

GitHub

solid-primitives/packages/deep at main · solidjs-community/solid-pr...

A library of high-quality primitives that extend SolidJS reactivity. - solid-primitives/packages/deep at main · solidjs-community/solid-primitives

ringsigOP•2y ago

Perfect, thanks!

baxuz•2y ago

@thetarnav why are the examples there using createSignal? I thought that the point of the createStore was that it was deeply reactive, compared to simple signals.

thetarnav•2y ago

lol it should be createStore 🤦‍♂️

baxuz•2y ago

ok but why do we need trackStore? What's the difference compared to regular store prop accessing inside tracking contexts? does trackStore trigger on any store updates, even if the prop isn't referenced? IE converting the store to a "dumb" createSignal for tracking purposes?

thetarnav•2y ago

normally you shouldn't need sth like this as you track what you access - what you want to use. whats the point of tracking things you don't access, right? But sometimes people want to have the effect run on any change to the store trackStore just tries do that as efficiently as possible, as the alternative is to recursively traverse the whole store and access every property I haven't tested that, but if you want to save the store to localStorage in an effect, it might be faster to use trackStore for tracking and JSON.stringify an unwrapped store object to avoid proxy traps than stringifying the proxy.

baxuz•2y ago

Makes sense. Gotta say I'd love to see https://github.com/pmndrs/valtio ported to solidjs.

GitHub

GitHub - pmndrs/valtio: 💊 Valtio makes proxy-state simple for Reac...

💊 Valtio makes proxy-state simple for React and Vanilla - GitHub - pmndrs/valtio: 💊 Valtio makes proxy-state simple for React and Vanilla

Gaming

Programming

Listening to all changes in an array or object in a store