wary locust
what is the best primitives/library to use when dealing with deep nested structure? the data I'm dealing with looks like a graph with nodes and leaves.
every nodes/leaves has a component that should update his data that should stay reactive.
pretty hard to explain the context 😅
I was thinking about using a createStore (globally or within a context)
in the end I will build the UI based on the graph representation using recursivity
the closer think that would work a bit the same is a dynamic filter with nested conditions
boreal valve
createStore should be fine. If you encounter errors because of recursive links onto the same object, use a getter to reference the original location.
wary locust
ok ok I think i will just try and see
what I expect is to have the parent informed when children (and sub-children, etc) change their values
so that a node can just udate his level
do you believe using a context is necessary?
I guess if I only need this store one at a time it is not
boreal valve
what I expect is to have the parent informed when children (and sub-children, etc) change their values
This is not how Solid's fine-grained reactivity works. However, you can use one of our community primitives to facilitate deep tracking.
You can use a global store if you only need one in your app.
wary locust
Is it (completely 🫣) illegal in Solid world?
import { For } from "solid-js";
import { render } from "solid-js/web";
import { createStore } from "solid-js/store";
type Level = {
value: number;
sub?: Array<Level>;
};
function Level(props: { store: Level }) {
const [local, setLocal] = createStore<Level>(props.store);
setTimeout(() => setLocal("value", (value) => value + 10), 2000);
return (
<>
<pre>local: {local.value}</pre>
<For each={local.sub}>{(sub) => <Level store={sub} />}</For>
</>
);
}
function Main() {
const [store, _] = createStore<Level>({
value: 1,
sub: [
{ value: 2, sub: [{ value: 3 }, { value: 4 }] },
{ value: 5, sub: [{ value: 6 }, { value: 7 }] },
],
});
return (
<div>
<pre>store: {JSON.stringify(store, null, 2)}</pre>
<Level store={store} />
</div>
);
}
render(() => <Main />, document.getElementById("app")!);
yes I understand this is against the principle of unidirectional flow
my other solution would be to flatten the hierarchy in a second structure that I would use to update the nodes
but if I can use the recursive trick by exploring the graph like in the example below, that would be nice altough it feels a little bit hacky ^^
Is this (completely 🫣) illegal in Solid world?
boreal valve
You can create reactivity made to order with solid using our trigger directive: https://github.com/solidjs-community/solid-primitives/tree/main/packages/trigger
You could even just define triggers for the nodes you want to track as setters.
wary locust
I'm unsure how that would work as I don't fully get the purpose of the lib but I'll have a look, thanks 🙂
boreal valve
Trigger basically allows you to trigger reactivity for whatever. For example, if you wanted to trigger an effect on all image.onload events, you could set up a trigger that is called inside a global capturing onload-Event that checks if the target is an img tag.
wary locust
mmh I feel I would completely cheat on Solid with this one 😂 I keep this in mind, thank you for your help
boreal valve
Our reactive Map and Set primitives use this a lot. And stores also use a similar mechanism to track the leaves.