Nested Objects Reactivity

Description

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

Example

JavaScript

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

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


// address.jsx --------------------------------------------------------------       
import { useSelector } from './other-example'

// Component listening for address object changes
const Address = () => {
  const { address } = useSelector(['address'])
  const { street, city } = address

  return (
    <div>
      <span>{ street }</span>
      <span>{ city }</span>
    </div>
  )
}

TypeScript

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

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


// address.tsx --------------------------------------------------------------
import { useSelector } from './other-example'

// Component listening for address object changes
const Address = () => {
  const { address } = useSelector(['address'])
  const { street, city } = address

  return (
    <div>
      <span>{ street }</span>
      <span>{ city }</span>
    </div>
  )
}