SolidJS•2mo ago

Are Record types a bad type for using stores in Solid?

I posted this on github, its got the examples there. Essentially what I am trying to figure out is if using a Record<string, muhType> data type is the wrong choice for stores. I noticed that when I add a record, Solidjs issues updates where needed. The second you delete a record, it fails to both issue updates and actually remove the record. https://github.com/solidjs/solid/discussions/2150

GitHub

Object property in store is reactive when adding but not when remov...

When I create a new store I can add properties to a nested object and the app is reactive to those changes. Things work as expected so far. However, when I start to delete or remove properties, eve...

4 Replies

peerreynders•2mo ago

Did you try:

Set values to undefined to delete them from the Store. In TypeScript, you can delete a value by using a non-null assertion, like undefined!.

https://www.solidjs.com/docs/latest/api#updating-stores

SolidJS

Solid is a purely reactive library. It was designed from the ground up with a reactive core. It's influenced by reactive principles developed by previous libraries.

joemoe•2mo ago

I did not. I missed this part. They don't show an example in the example code. I just tested this and I can confirm that it does work. Thank you.

Maciek50322•2mo ago

fun fact changing

props.setApp("data", "states", newStates );

props.setApp("data", "states", newStates );

props.setApp("data", { states: newStates });

props.setApp("data", { states: newStates });

works too But then for <Index> to properly update, you have to have

const onRemove = (id: string) => {...}
...
<li onClick={() => onRemove(state().id)}>

const onRemove = (id: string) => {...}
...
<li onClick={() => onRemove(state().id)}>

instead of

const onRemove = (id: string) => () => {
...
<li onClick={onRemove(state().id)}>

const onRemove = (id: string) => () => {
...
<li onClick={onRemove(state().id)}>

Because compiler doesn't recognize this (the onRemove return value) as reactive function and you give it (onRemove) only initial value of state()

Starwort•2mo ago

const onRemove = (id: string) => {...}
...
<li onClick={() => onRemove(state().id)}>
const onRemove = (id: string) => {...}
...
<li onClick={() => onRemove(state().id)}>

This looks like a good place for Solid's alternative call syntax:

const onRemove = (id: string) => {...}
...
<li onClick={[onRemove, state().id]}>

const onRemove = (id: string) => {...}
...
<li onClick={[onRemove, state().id]}>

Gaming

Programming

Are Record types a bad type for using stores in Solid?