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?

1 Reply

Chris P Bacon•3w ago

I am not familiar with trackStore , but for my own case I just dumbly iterated the leafs of the tree so that everything is tracked in that scope. I suspect this is not how you are supposed to do it, but at least it works 😛 https://github.com/chris-kruining/calque/blob/dc30ebb35e36ea34ea7e368b4f3b5636aa1c0881/src/features/file/grid.tsx#L49

Gaming

Programming

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