SolidJSS
SolidJS•3y ago•
38 replies
Torx

How to preserve reactivity in a multilevel object stored in a nanostore map ?

Hello,

I'm trying to create a simple cart store using the nanostores library (https://github.com/nanostores/solid), the data looks like this : 

export const getCartItems = map<CartItems>({
  id1: {
    id: 'id1',
    quantity: 1,
    type: 'product',
    meta: {
      // Some static values ...
    }
  },
  id2: {
    id: 'id2',
    quantity: 1,
    type: 'product',
    meta: {
      // Some static values ...
    }
  },
})


I'm reading the store like this : 

const CartItem = () => {
  const $items = useStore(getCartItems)
  const $total = useStore(getCartTotal)

  return (
    <div>
      <h1 class="text-3xl bold pb-6">Total : {$total()}</h1>

      <div class="pb-2">
        <h1>items </h1>
        <For each={Object.values($items())}>
            {(item) => (
              <span><b>id</b>{item.id}, <b>quantity</b>: {item.quantity}</span>
            )}
        </For>
      </div>
    </div>
  )
}


I'm facing 2 problems :

1 - If I add a new item to the cart, it's reactive. If I remove an item or reset the cart, it's also reactive. If I try to increase the quantity of an item, it's NOT reactive. I think this is because it's a nested object, but how can I fix this to make it reactive without changing the nanostore library ?

2 - useStore returns a signal, but I'd like to use a useCart function that returns every cart-related logic (because I want it to be a library and it's annoying to install @nanostores/solid in the final project), I tryed different things, none of them work : 

// don't work
const useCart = () => {
  items: useStore(getCartItems)
}

// deriving signal, don't work either
const useCart = () => {
  items: () => useStore(getCartItems)()
}

// Not working either withtout the object
const $getCartItems = () => useStore(getCartItems)()


Is there a solution to preserve the reactivity without having to import the useStore function in the final project ?

Thanks for the help!
Was this page helpful?