Recoil 同步 0.1

recoil-sync NPM 套件的初始開放原始碼發行！Recoil 同步提供附加函式庫，協助將 Recoil 狀態與外部系統同步。可透過選擇器或 useEffect() 實作簡單的 非同步資料查詢，或使用 原子效應 對個別原子進行雙向同步。recoil-sync 附加套件提供一些其他功能

• 批次處理原子事務 - 可將多個原子的更新批次處理成單一事務與外部系統傳輸。如果原子事務對相關原子的狀態一致性而言是必要的，此功能至關重要。
• 抽象且靈活 - 使用此 API，使用者可以指定要同步哪些原子，並且與描述如何同步的機制分開。這讓元件可以使用原子，並在不同的環境中與不同的系統同步，而無需變更其實作。例如，在獨立工具中使用時，元件可能會使用原子來持久化網址，而在嵌入其他工具時，則持久化到自訂使用者資料庫中。
• 驗證與向下相容 - 處理外部來源的狀態時，驗證輸入資料非常重要。當狀態持續存在於應用程式生命週期之外時，也必須考量狀態前一版本的向下相容性。recoil-sync 和 refine 有助於提供此功能。
• 將原子複雜對應至外部儲存裝置 - 原子與外部儲存項目可能並非一對一對應。原子可能會轉移，以便使用較新版本的項目，可能從多個項目中擷取 props，僅為複合狀態的一部分，或進行其他複雜對應。
• 與 React Hooks 或 Props 同步 - 這個函式庫可讓原子與非原子效果中可存取的 React hooks 或 props 同步。

recoil-sync 函式庫還提供外部儲存裝置的內建指令，例如：與瀏覽器 URL 同步。

---

基本概念是，可為要同步的每個原子新增 syncEffect()，然後在 <RecoilRoot> 內新增 <RecoilSync>，以指定這些原子的同步方式。您可以使用內建儲存裝置，例如：<RecoilURLSyncJSON>、自行製作，甚至根據不同的儲存裝置同步不同的原子群組。

範例

URL 維持性

以下是一個簡單範例，說明 將原子與瀏覽器 URL 同步

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

然後，在應用程式根目錄中，只需包含 <RecoilURLSyncJSON>，即可讓所有標記的原子與 URL 同步

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

這樣就完成了！現在，這個原子會根據初始載入時的 URL 初始化其狀態，任何狀態變更都會更新 URL，而 URL 的變更（例如回上一頁按鈕）會更新原子。在 同步效果、儲存裝置指令 和 URL 維持性 指南中，查看更多範例。