Stijn
Stijn
PostsComments
SSolidJS
Created by Stijn on 2/2/2025 in #support
Trying to understand stores in a reactive scope
I've started rewriting my code to use stores instead of lots of signals, and I'm not sure if I understand how they work when passed into a reactive context. This is my store: 
export type ExplorerState = {
  clips: ClipTreeItem[];
};

export type ClipTreeItem = {
  id: string;
  name: string;
};

export const [explorer, setExplorer] = createStore<ExplorerState>({
  clips: [],
});
export type ExplorerState = {
  clips: ClipTreeItem[];
};

export type ClipTreeItem = {
  id: string;
  name: string;
};

export const [explorer, setExplorer] = createStore<ExplorerState>({
  clips: [],
});
I then have a ClipTree component to which I pass all clips: 
<ClipTree rows={explorer.clips} />
<ClipTree rows={explorer.clips} />
Lastly, my store gets updated when receiving a callback (from Tauri) like so. 
setExplorer(
  "clips",
  (item: ClipTreeItem) => item.id === id,
  "name",
  change.name
);
setExplorer(
  "clips",
  (item: ClipTreeItem) => item.id === id,
  "name",
  change.name
);
This does not update one of the clips in my clip tree component. I expected that if you update a specific clip with path syntax, any component that has all clips passed into it as a prop in a reactive context ({}) would update. Am I understanding incorrectly how this works? Do I need to write my <ClipTree> in a different way?
14 replies