Watch

<Watch watch={watchSource} deep={boolean?}>
{(value) => ReactNode}
</Watch>

import { createStore, Watch } from "zenbox";

const counterStore = createStore({ count: 0 });

function CounterDisplay() {
  return (
    <div>
      <Watch watch={counterStore}>
        {(state) => (
          <div>
            <h1>计数: {state.count}</h1>
            <p>偶数: {state.count % 2 === 0 ? "是" : "否"}</p>
          </div>
        )}
      </Watch>

      <button onClick={() => counterStore.setState((s) => s.count++)}>
        增加
      </button>
    </div>
  );
}

const userStore = createStore({
  firstName: "张",
  lastName: "三",
  age: 30,
});

function UserInfo() {
  return (
    <div>
      <Watch
        watch={() => `${userStore.value.firstName}${userStore.value.lastName}`}
      >
        {(fullName) => <h1>欢迎，{fullName}！</h1>}
      </Watch>

      <Watch watch={() => userStore.value.age >= 18}>
        {(isAdult) => <p>{isAdult ? "成年人" : "未成年"}</p>}
      </Watch>
    </div>
  );
}

const cartStore = createStore({
  items: [
    { id: 1, name: "笔记本电脑", price: 999, quantity: 1 },
    { id: 2, name: "鼠标", price: 25, quantity: 2 },
  ],
});

const settingsStore = createStore({
  currency: "￥",
  taxRate: 0.08,
});

function CartSummary() {
  return (
    <Watch
      watch={() => ({
        items: cartStore.value.items,
        currency: settingsStore.value.currency,
        taxRate: settingsStore.value.taxRate,
      })}
    >
      {({ items, currency, taxRate }) => {
        const subtotal = items.reduce(
          (sum, item) => sum + item.price * item.quantity,
          0
        );
        const tax = subtotal * taxRate;
        const total = subtotal + tax;

        return (
          <div>
            <h3>购物车摘要</h3>
            <p>商品数量: {items.length}</p>
            <p>
              小计: {subtotal.toFixed(2)} {currency}
            </p>
            <p>
              税费: {tax.toFixed(2)} {currency}
            </p>
            <p>
              总计: {total.toFixed(2)} {currency}
            </p>
          </div>
        );
      }}
    </Watch>
  );
}

const appStore = createStore({
  user: null,
  isLoading: false,
  error: null,
});

function UserProfile() {
  return (
    <Watch watch={() => appStore.value}>
      {({ user, isLoading, error }) => {
        if (isLoading) return <div>正在加载用户资料...</div>;
        if (error) return <div>错误: {error.message}</div>;
        if (!user) return <div>请登录</div>;

        return (
          <div>
            <h1>欢迎，{user.name}！</h1>
            <p>邮箱: {user.email}</p>
          </div>
        );
      }}
    </Watch>
  );
}