跳至主要內容

<RecoilSync> - Recoil 同步儲存

來自 Recoil Sync 程式庫 的元件，用於 定義原子外部的儲存，以 syncEffect() 原子效果進行同步。

function RecoilSync(props: {
  storeKey?: string,

  read?: ReadItem,
  write?: WriteItems,
  listen?: ListenToItems,

  children: React.Node,
}): React.Node

storeKey 用於比對哪些原子應該與此外部儲存進行同步。

讀取介面​

read() 回呼定義如何從外部儲存讀取項目。這會用於嘗試根據外部儲存初始化原子值時。也可能於其他複雜對應時呼叫。

type ReadItem = ItemKey =>
  | DefaultValue
  | Promise<DefaultValue | mixed>
  | Loadable<DefaultValue | mixed>
  | mixed;

你可以傳回儲存中項目的實際值。如果此項目未設定或無法在儲存中取得，你可以傳回 DefaultValue。也可以傳回非同步 Promise 給值，如果此值需要使用非同步操作才能從儲存中讀取。你也可以提供 Loadable 格式，如果需要的話，這對提供錯誤狀態很有用。

寫入介面​

write() 回呼會在原子狀態改變時呼叫，以便你可以定義如何將這些變更寫入外部儲存

type ItemDiff = Map<ItemKey, DefaultValue | any>;
type ItemSnapshot = Map<ItemKey, DefaultValue | mixed>;

type WriteItems = ({
  diff: ItemDiff,
  allItems: ItemSnapshot,
}) => void;

write() 回呼會提供一些命名參數

  • diff - 已變更項目金鑰與其新值的地圖，適用於此原子交易。
  • allItems - 這間商店使用過的所有項目之其中鍵值對應。

項目的值可能為 DefaultValue 物件，表示應重設或刪除該項目。如 syncEffect() 指定了 syncDefault 選項，那麼將提供實際的預設值，而不是 DefaultValue 佔位符物件。

傾聽介面​

listen() 回呼函式允許您訂閱來自外部商店的非同步更新，並變異原子狀態以使它們保持同步。

type UpdateItem = <T>(ItemKey, DefaultValue | T) => void;
type UpdateItems = ItemSnapshot => void;
type UpdateAllKnownItems = ItemSnapshot => void;

type ListenToItems = ({
  updateItem: UpdateItem,
  updateItems: UpdateItems,
  updateAllKnownItems: UpdateAllKnownItems,
}) => void | (() => void);

listen() 回呼函式在其參數中提供了一些回呼函式，可讓您將項目更新為新值。任何已從這些項目讀取的原子都是「已訂閱」，而且它們的狀態將透過從更新後之項目讀取來更新。

  • updateItem() - 這將透過提供鍵值，來更新單一項目的值。如該值為 DefaultValue，則會將該項目重設為預設值。這只會更新單一項目，其他項目不會受到影響。
  • updateItems() - 這將透過提供項目鍵值對應來更新多個項目。同樣地，如果任何值的 DefaultValue，則這些項目將會重設。這只會更新所提供的項目，其他項目不會受到影響。
  • updateAllKnownItems() - 這將透過提供項目鍵值對應來更新多個項目。同樣地，如果任何值的 DefaultValue，則這些項目將會重設。此函式將更新已由與此商店同步的原子讀取的所有已知項目。這表示，如果提供對應中不包含項目鍵，則該項目將重設為預設值。

可以從您的 listen() 實作中回傳回呼函式控制項，當商店作用已清理完成時，將會呼叫該回呼函式。可用於清理您對外部商店的訂閱。

範例​

詳見「實作商店」指南以取得範例。