Mocha
Mocha
PostsComments
SSolidJS
Created by Mocha on 11/6/2024 in #support
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[]);
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>
<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);
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);
});
// 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);
});
// 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?
2 replies