Skip to main content

Nested objects reactivity

Cervello provides you out-of-the-box support for nested objects.
You can change a nested property of an object and it will be notified automatically as well without any problem

// store-example.ts ---------------------------------------------------------
import { cervello } from 'cervello'

const { store } = cervello({
  name: 'Cervello',
  address: {
    city: 'Huelva'
    street: 'Avenida de Andalucía'
  }
})

// address-changer.tsx ------------------------------------------------------
import { store } from './store-example'

function AddressChanger () {
  return (
    <button onClick={() => { store.address.city = 'Seville' }}>
      Change city to Seville
    </button>
  )
}


// address.tsx --------------------------------------------------------------
import { useStore } from './store-example'

// Component listening for address object changes
function Address () {
  const { address } = useStore({ select: ['address.*'] })

  return (
    <div>
      <p>{ address.street }</p>
      <p>{ address.city }</p>
    </div>
  )
}


// city.tsx --------------------------------------------------------------
import { useStore } from './store-example'

// Listening for nested object single property
function AddressCity () {
  const { address } = useStore({ select: ['address.city'] })

  return (<p>{ address.city }</p>)
}