Creating a Store

In Caro-Kann, a store is defined as an external space where global state is saved. To create such a store, you must use the create function provided by Caro-Kann. This function takes the initial value of the state as a parameter, stores it in an internal store, and returns a useStore hook.

The create function must be called outside of a component. If called inside a component, a new store will be created every time the component re-renders, causing the previous state to be lost. This behavior contradicts the purpose of global state management, so special care must be taken.

const useStore = create({
  email: "wpfekdml@me.com",
  name: "Ayden Blair",
  phoneNumber: "010-****-****",
  age: 30,
});

The useStore hook is the only way to access the store created through the create function, and it returns a tuple of [value, setValue], just like React’s useState hook.

function ProfileCard() {
  const [value, setValue] = useStore();
  
  return (
    <div class={style.root}>
      <div>name: {value.name}</div>
      <div>
        <div>email: {value.email}</div>
        <div>phone: {value.phoneNumber}</div>
      </div>
    </div>
  )
}