Remove item from store list?

I have tried:

const itemId = 5;
setMainStore(
  "mylist",
  produce((mylist: number[] | undefined) =>
    mylist?.filter(item => item.id !== itemId.id
  )
)
console.log(mainStore.mylist!);

const itemId = 5;
setMainStore(
  "mylist",
  produce((mylist: number[] | undefined) =>
    mylist?.filter(item => item.id !== itemId.id
  )
)
console.log(mainStore.mylist!);

and

const itemId = 5;
setMainStore(
  "mylist",
  produce((mylist: number[] | undefined) =>
    mylist?.slice(mylist?.findIndex(item => item.id === itemId), 1)
  )
)
console.log(mainStore.mylist!);

const itemId = 5;
setMainStore(
  "mylist",
  produce((mylist: number[] | undefined) =>
    mylist?.slice(mylist?.findIndex(item => item.id === itemId), 1)
  )
)
console.log(mainStore.mylist!);

but neither seem to change the list at all.

15 Replies

high1•2y ago

If you are using produce, you need to modify the list - filter does not modify the existing list, it returns a new one. Slice also returns a new list. That's why the state is not updating. You could just remove produce from both examples, it should work.

zimoOP•2y ago

thanks for your response I see, but if I have a long path before "mylist" in my mainStore, then it would be annoying to look up that path. Can it not be done with produce?

high1•2y ago

It can be done with produce

zimoOP•2y ago

in my code I actually have something more like:

setMainStore(
  "cities",
  c => c.name === myname,
  "users",
  u => u.id === myuderid,
  "mylist",
  produce((mylist: number[] | undefined) =>
    mylist?.filter(item => item.id !== itemId.id
  )
)

setMainStore(
  "cities",
  c => c.name === myname,
  "users",
  u => u.id === myuderid,
  "mylist",
  produce((mylist: number[] | undefined) =>
    mylist?.filter(item => item.id !== itemId.id
  )
)

high1•2y ago

Just use the long path, and state update syntax That's it. What's wrong there? Sorry produce is not good here My bad Produce uses imperative update Remove the produce Only that Since it's a list of objects, it should work

zimoOP•2y ago

oh so I can still use the lambda?

high1•2y ago

The references would stay the same I think so, yes.

zimoOP•2y ago

gonna try it now

high1•2y ago

Are you using it with <For>?

zimoOP•2y ago

outside of my component I'm using <For> yes to render each city, user, list item consuming the store

high1•2y ago

Ok, you can double check that components do not get recreated this way

zimoOP•2y ago

Ah it did work! thanks!

high1•2y ago

Inside <For> you can console log - it should log only once for each object when it's added or initially

zimoOP•2y ago

Good idea

gaba3535•2y ago

Just passing by to share with you guys: this conversation allowed me to understand better how solid Stores works, then i finally got to delete an entry from Store list ( createStore([])): - i was setting the entry as undefined, thinking it would delete it from the array, But it was just changing the value to undefined and not changing the length. - so returning a new array in setStore() fixed it so thanks a lot! ----------------- TL;DR: fixed remove a item from Store of array by - replacing setStore(it => it.id === matchingId, undefined); with setStore(list => list.filter(it => it.id != matchingId)) (sharing in case anyone have the same problem)

Gaming

Programming

Remove item from store list?