SolidJSS
SolidJS•15mo ago•
1 reply
Mocha

Nested Stores not tracking with `trackDeep`/`trackStore`

I have a top-level store created in parent component A. This store contains an array of objects, like so:

type MyType = {
  field1: boolean[],
  field2: string[],
};

...

const [myStore, setMyStore] = createStore([] as MyType[]);


After this store is populated with objects during component A's initialization, each object is then passed as a prop to a child component B: 

<For each={indices()}>
  {(item, index) => {
    return (
      <B obj={myStore[index()]} />
    );
  }}
</For>


Now in component B, a nested store is created for easier fine-grained reactivity:

const [obj, setObj] = createStore(props.obj);


When values inside obj are set within component B, effects inside component B react accordingly (using trackStore plugin, or directly depending on a specific value).

// Inside component B
createEffect(() => {
  trackStore(obj);
  console.log(obj.field1);
});


However, effects in component A do not run on updates that trigger component B's effects:

// Inside component A
createEffect(() => {
  // This effect does not run on `obj` updates in component B
  trackStore(myStore);
  console.log(myStore[0].field1);
});


Could anyone advise on what I may be doing wrong here? Is there something wrong with passing store values as props and then creating a nested store based on that prop?
Was this page helpful?