Why doesn't the store update trigger a re-render of all dependent elements?

[isaacHagoel]

Hi,
Please see here for a simple reproduction of the issue I am facing.
Click on one of the "shuffle" buttons. It will changed the stringified store value (so it triggers some rerendering) but it won't trigger a re-render of the cards even though they are based on the store value.
Am I doing something wrong?
Thanks,
Isaac

[ryansolid]

You are destructuring your store in the rest parameters of your component. This loses reactivity. In general don't destructure props with Solid. In your case only line 11 in Board.tsx is an issue. But if your columns were more dynamic they'd have a problem too.

Also Solid Stores allow for more performant path based setters (similar to ImmutableJS).. cloning in setStore top-level causes everything to have to re-evaluate throughout the whole object. Where using the path gives us the ability to perform the most localized change without diffing. Here is how I used setStore:

setStore(
  "columnItems",
  (column) => column.id === columnId,
  "items",
  (prevItems) => shuffleArray(prevItems)
);
 
 // previously:
setStore((prevBoard) => ({
  columnItems: prevBoard.columnItems.map((column) =>
    column.id === columnId
      ? { ...column, items: shuffleArray(column.items) }
      : column
  ),
}));

Instead of cloning it runs through the path and only shuffles the arrays that match the filter at the end.

In fact once I made this change I needed to remove the destructuring on Column.tsx. See working version here: https://playground.solidjs.com/?hash=101083038&version=1.1.1

[isaacHagoel]

thanks @ryansolid.
I was able to make this work thanks to your advice.
I was thinking about porting my dnd library to Solid to give the community something that is production ready.
In the process of creating the examples I would also learn some Solid. That's the thought at least.
Hopefully, as I proceed it will become easier for me to wrap my head around all of the do's and don'ts.