How to attach derived properties in nested object in store?

[geocine]

I saw that you can do this in the documentation

import { derive } from 'valtio/utils'

// create a base proxy
const state = proxy({
  count: 1,
})

// create a derived proxy
const derived = derive({
  doubled: (get) => get(state).count * 2,
})

// alternatively, attach derived properties to an existing proxy
derive({
  tripled: (get) => get(state).count * 3,
}, {
  proxy: state,
})

This only shows 1 level of proxy , I have a state which looks something like

const state = proxy({
  // ...
  currentMenu: {
    multiplier: 1,
    items: [],
    // I want to add a `totalPrice` derived property from `currentMenu.multiplier` and `currentMenu.items`
  }
  // ...
})

The items array contains an array of selected/unselected items. I will only include selected items and the number of the multiplier to compute the totalPrice.

What is the semantic way do do this in my case?

[dai-shi]

Assuming you don't modify currentMenu reference, doesn't this work?

derive({
  totalPrice: (get) => {
    const currentMenu = get(state.currentMenu)
    return currentMenu.multiplier * currentMenu.items.reduce((p, c) => p + (c.selected ? c.price : 0), 0)
  },
}, {
  proxy: state,
})

[geocine]

Will this derived totalPrice go under currentMenu? if yes, how? I do not understand how it will be under currentMenu since the first parameter passed for derive is a single level object with no mention of currentMenu. Am I missing something?

I am expecting that I could access this through

state.currentMenu.totalPrice

[dai-shi]

Oh, I see. Then, this should work. (You should not overwrite currentMenu like state.currentMenu = null.)

derive({
  totalPrice: (get) => {
    const currentMenu = get(state.currentMenu)
    return currentMenu.multiplier * currentMenu.items.reduce((p, c) => p + (c.selected ? c.price : 0), 0)
  },
}, {
  proxy: state.currentMenu,
})

Basically, any child objects are just state, so you could do this too.

const currentMenuState = state.currentMenu
derive({
  totalPrice: (get) => {
    const currentMenu = get(currentMenuState)
    return currentMenu.multiplier * currentMenu.items.reduce((p, c) => p + (c.selected ? c.price : 0), 0)
  },
}, {
  proxy: currentMenuState,
})

[geocine]

Thanks @dai-shi for being so responsive, looking forward to the future of valtio