S
SolidJS•2y ago
joemoe

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
peerreynders•2y 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
joemoeOP•2y 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
Maciek50322•2y ago
fun fact changing 
props.setApp("data", "states", newStates );
props.setApp("data", "states", newStates );
to 
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
Starwort•2y 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]}>

Did you find this page helpful?