How to work with nested objects?

[anton-at-bay]

Hello all,

Thanks for the nanostores, my goto tool to handle state in all types of projects 🙏

I haven't found a way to handle nested objects update when using the map.

const state = map({
  1: { address: { street: 'Hello' }},
  2: { address: { street: 'Hello 2' }},
})

How do I update street for the second item?

Many thanks in advance!

[ai]

There is no special API and we do not plan to add API to the core to keep core minimalistic.

Here are options:

1. Use JS destructors:

state.setKey(2, { ...state.get()[2], street: 'New' })

2. Add an action function and hide nested object changes inside:

export function changeState(id, key, value) {
  state.setKey(id, { ...state.get()[id], [key]: value })
}

import { changeState, state } from '../stores/state'

changeState(id, 'street', 'New')

[anton-at-bay]

Thanks for your response!

While the reason of keeping the core minimalistic, perhaps there is a chance an additional package/export can be introduced specially to tackle nested state updates?

Deeply nested objects are almost always needed to handle state and updating them might become cumbersome.

Nice addition would be having a method to update the state by a path, something like.

update(state, 'some.deeply.nested.path')

Adding such a method would be optional by named import from the core package or creating an additional nanostores/helpers package.

Again, many thanks for you help 🙏