Skip to main content

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

// 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>
)
}