實作儲存體

儘管此函式庫提供內建儲存體，您仍可以使用 <RecoilSync> 實作自己的儲存體。指定選用的 storeKey 來識別並配對應該與哪個儲存體同步的原子。接著，指定以下選用回呼，以定義您的儲存體行為

• read - 如何從外部儲存體讀取個別項目，例如在初始化原子時。
• write - 如何將變異原子狀態寫入外部儲存體。
• listen -如何訂閱儲存體的非同步更新來變異原子狀態。

請參閱 <RecoilSync> API 參考文件，以了解完整回呼詳細資訊。

與 React Prop 同步的範例

使用 <RecoilSync> 的範例儲存體，將根據 React prop 值初始化原子

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>
  );
}