البدء

import {
  createRxState,
  createRxStateTuple,
  createRxReducer,
} from "@byeolnaerim/global-rx-state";

// 1. Named object mode
// 컴포넌트 내부에서 같은 name으로 호출해도 같은 store를 받습니다.
export function CounterButton() {
  const { setCount, useCount } = createRxState(0, "count");
  const count = useCount();

  return (
    <button onClick={() => setCount((prev) => prev + 1)}>
      {count}
    </button>
  );
}

// 2. Named tuple mode
// 서버에서 받은 workspaceId, 사용자가 선택한 tabName처럼
// store key가 runtime에 결정될 때 유용합니다.
export function useTabDraftState(tabName: string) {
  return createRxStateTuple(
    { title: "", content: "" },
    `tab-draft:${tabName}`,
    { storage: "auto" },
  );
}

// 3. Reducer mode
// 업데이트 규칙이 많거나 값들이 서로 의존하면 reducer로 모읍니다.
export function CartSummary() {
  const { dispatchCart, useCart } = createRxReducer(
    initialCart,
    cartReducer,
    "cart",
    { storage: "auto" },
  );
  const cart = useCart();

  return <div>{cart.items.length}</div>;
}

// 4. Anonymous tuple mode
// name이 없는 tuple store는 모듈 최상위에서만 만들고 export해서 사용합니다.
// 함수나 컴포넌트 내부에서 호출하지 마세요.
export const [setNoNameCount, getNoNameCount, useNoNameCount] =
  createRxState(0);