How to select nested property using deep-map in react

[jozefini]

I'm testing out the nanostores but i cannot find an example where
you select a specific nested property in a deep map, so it also
"could" potentially re-render only when width changes.

import { useStore } from '@nanostores/react'
import { deepMap } from 'nanostores'

const $areas = deepMap({})
$areas.setKey('A1', { x: 0, y: 0, width: 10, height: 10 })
$areas.setKey('A2', { x: 10, y: 0, width: 10, height: 10 })

const AreaWidth = ({ id = 'A1' }) => {
  // Need $areas[id].width here, and re-render when $areas[id].width changes only
  const a1WidthOnly = useStore($areas) 
  return <div>{a1WidthOnly}</div>
}

Can anyone provide any example?

[ai]

For non-dymamic path you can use computed():

$a1WidthOnly = computed($areas, areas => areas.a1.width)

const Area1Width = ({ id = 'A1' }) => {
  // Need $areas[id].width here, and re-render when $areas[id].width changes only
  const a1WidthOnly = useStore($a1WidthOnly) 

For you example with area ID from props, I would create a store for each area:

let areas = {}
areas.a1 = map({ x: 0, y: 0, width: 10, height: 10 })
areas.a2 = map({ x: 0, y: 0, width: 10, height: 10 })

const AreaWidth = ({ id = 'A1' }) => {
  // Need $areas[id].width here, and re-render when $areas[id].width changes only
  const a1WidthOnly = useStore(areas[id], { keys: 'width' }) 

Or you can create computed store on the fly:

let cache = {}
function getComputed(id) {
  if (!cache[id]) {
    cache[id] = computed($areas, areas => areas[id].width)
  }
  return cache[id]
}

const Area1Width = ({ id = 'A1' }) => {
  // Need $areas[id].width here, and re-render when $areas[id].width changes only
  const a1WidthOnly = useStore(getComputed(id)) 

[jozefini]

Hey, thanks for the response, this was very helpful.
Based on your last example I managed to create a dynamic path + computed on the fly
and is working great.

import { useStore } from '@nanostores/react'
import { computed, deepMap } from 'nanostores'

const $areas = deepMap({})
$areas.setKey('A1', { x: 0, y: 0, width: 10, height: 10 })
$areas.setKey('A2', { x: 10, y: 0, width: 10, height: 10 })

let areaCache = {}
function getComputed(id, property = '') {
  const cacheKey = `${id}.${property}`
  if (!areaCache[cacheKey]) {
    areaCache[cacheKey] = computed($areas, areas =>
      property ? areas[id][property] : areas[id]
    )
  }
  return areaCache[cacheKey]
}
export const useArea = (id, property = '') => {
  return useStore(getComputed(id, property))
}

Question 2 - would be nice to have

Is it possible to access reactive size and keys() from Map?

export const useAreasSize = () => {
  return useStore(...)
}
export const useAreasKeys = () => {
  return useStore(...)
}
function ReactComponent() {
  const keys = useAreasKeys() // Re-render only when a key is added/removed
  const size = useAreasSize() // Re-render only when number change
}