SolidJS•13mo ago

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•13mo 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.

zimo•13mo 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•13mo ago

It can be done with produce

zimo•13mo 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•13mo 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

zimo•13mo ago

oh so I can still use the lambda?

high1•13mo ago

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

zimo•13mo ago

gonna try it now

high1•13mo ago

Are you using it with <For>?

zimo•13mo ago

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

high1•13mo ago

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

zimo•13mo ago

Ah it did work! thanks!

high1•13mo ago

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

zimo•13mo ago

Good idea

gaba3535•12mo 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?