ストアの実装

ライブラリーにはいくつかの組み込みストアが付属していますが、<RecoilSync>を使用して、独自のストアを実装できます。アトムをどのストアと同期する必要があるかを識別して一致させるために、オプションの storeKey を指定します。次に、次のオプションのコールバックを指定して、ストアの動作を定義します

• read - 外部ストアから個々のアイテムを読み取る方法、例: アトムを初期化する場合。
• write - 変異したアトムの状態を外部ストアに書き込む方法。
• listen - アトムの状態をミューテートするためにストアからの非同期更新を購読する方法。

コールバックの完全な詳細については、<RecoilSync> API リファレンスを参照してください。

React プロパティとの同期例

React プロパティの値に基づいてアトムを初期化する <RecoilSync> を使用するストアの例

function InitFromProps({children, ...props}) {
  return (
    <RecoilSync
      storeKey="init-from-props"
      read={itemKey => props[itemKey]}
    >
      {children}
    </RecoilSync>
  );
}

ユーザーデータベースとの同期例

カスタムデータベースと同期する <RecoilSync> を使用するストアの例

function SyncWithDB({children}) {
  const connection = useMyDB();
  return (
    <RecoilSync
      storeKey="my-db"
      read={itemKey => connection.get(itemKey)}
      write={({diff}) => {
        for (const [key, value] of diff) {
          connection.set(key, value);
        }
      }}
      listen={({updateItem}) => {
        const subscription = connection.subscribe((key, value) => {
          updateItem(key, value);
        });
        return () => subscription.release();
      }}
    >
      {children}
    </RecoilSync>
  );
}