Listen for changes from components

Description

Due to immutability and object reference persistance, cervello allows you to listen for changes with a normal useEffect in case you need to execute some function when store change

Example

JavaScript

// address-changer.jsx
import { useEffect } from 'react'
import { useAddressStore } from './other-example'

const AddressChanger = () => {
  const store = useAddressStore()

  useEffect(() => {
    console.log('City has changed to: ', store.address.city)
  }, [store.address.city])

  return (
    <>
      <p>City: {store.address.city}</p>

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

TypeScript

// address-changer.jsx
import { useEffect } from 'react'
import { useAddressStore } from './other-example'

const AddressChanger = () => {
  const store = useAddressStore()

  useEffect(() => {
    console.log('City has changed to: ', store.address.city)
  }, [store.address.city])

  return (
    <>
      <p>City: {store.address.city}</p>

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