@ adobe/ 数据反应

反应约束 @ adobe/ 数据 ——ECS数据库和可观测数据的钩和上下文.

安装

pnpm add @adobe/data @adobe/data-react react

同伴依赖关系

要求数 react >= 17.0.0 (支持反应17,18,19).

使用量

使用 useObservableValues 需要观察的一切——通过一个能返回可观察物体的工厂:

import { DatabaseProvider, useDatabase, useObservableValues } from "@adobe/data-react";
import { Database } from "@adobe/data/ecs";

const myPlugin = Database.Plugin.create({ /* ... */ });

function App() {
  return (
    <DatabaseProvider plugin={myPlugin}>
      <Counter />
    </DatabaseProvider>
  );
}

function Counter() {
  const db = useDatabase(myPlugin);
  const values = useObservableValues(() => ({
    count: db.observe.resources.count,
  }));

  if (!values) return null;
  return (
    <div>
      <p>Count: {values.count}</p>
      <button onClick={() => db.transactions.increment()}>Increment</button>
    </div>
  );
}