Recoil 同步程式庫

recoil-sync NPM 套件提供了一個附加程式庫，協助將 Recoil 狀態與外部系統同步。可以透過選擇器或 useEffect() 實作簡單的非同步資料查詢，或使用原子效果雙向同步各別原子。recoil-sync 附加套件提供了一些其他功能

• 批次處理原子交易 - 可以將多個原子的更新批次處理為與外部系統的單一交易。如果相關原子的狀態一致，這項功能非常重要。
• 抽象和彈性 - 這個 API 讓使用者可以 separately 說明要同步的原子，並且說明如何同步的機制。這讓元件可以 atomic 且利用不同的系統在不同的環境中同步，而不須變更實作。例如，一個元件可能會使用原子，在當獨立工具中使用時，會儲存在 URL 中；而在另一個工具中嵌入時，會儲存在自訂使用者資料庫中。
• 驗證和向後相容性 - 在處理來自於外部來源的狀態時，驗證輸入內容非常重要。當狀態是在應用程式的生命週期之後持續保留時，考量狀態前一版本的向後相容性也很重要。 recoil-sync 與refine 協助提供這項功能。
• 原子與外部儲存的複雜對應 - 原子與外部儲存項目之間可能不是一對一對應。原子可能會轉移來使用較新的項目版本，可能會從多個項目中提取 prop，只是一部份複合狀態，或其他複雜對應。
• 與 React Hook 或 Prop 同步 - 此函式庫可讓原子與無法從原子效果存取的 React Hook 或 Prop 同步。

recoil-sync 函式庫也提供外部儲存的內建實作，例如 與瀏覽器網址同步。

---

基本概念在於，可以將 syncEffect() 新增至每個您想要同步的原子，然後在 <RecoilRoot> 內部新增 <RecoilSync> 來指定如何同步這些原子。您可以使用內建儲存，例如 <RecoilURLSyncJSON>，建立自己的，或甚至使用不同的儲存來同步不同群組的原子。

範例

網址持續性

以下是使用 原子與瀏覽器網址同步 的簡單範例

const currentUserState = atom<number>({
  key: 'CurrentUser',
  default: 0,
  effects: [
    syncEffect({ refine: number() }),
  ],
});

然後，在您的應用程式根目錄下，直接包含 <RecoilURLSyncJSON>，以將所有這些標記的原子與網址同步

function MyApp() {
  return (
    <RecoilRoot>
      <RecoilURLSyncJSON location={{part: 'queryParams'}}>
        ...
      </RecoilURLSyncJSON>
    </RecoilRoot>
  )
}

就是這樣！現在這個原子將在初始載入時，根據網址來初始化其狀態，任何狀態突變都會更新網址，而網址的變更（例如返回按鈕）會更新原子。在 同步效果、儲存實作 和 網址持續性 指南中，查看更多範例。

安裝

請参閱 Recoil 安裝指南，並將 recoil-sync 新增為其他相依性。

recoil-sync 還使用 refine 函式庫進行類型精緻化和輸入驗證。