Recoil同期ライブラリ

recoil-sync NPMパッケージは、Recoilの状態を外部システムと同期するのに役立つアドオンライブラリを提供します。シンプルな非同期データクエリは、セレクタまたはuseEffect()、あるいはAtomエフェクトを使用して、個々のAtomの双方向同期を行うことができます。recoil-syncアドオンパッケージは、いくつかの追加機能を提供します。

Atomトランザクションのバッチ処理 - 複数のAtomの更新を、外部システムとの単一トランザクションとしてまとめて処理できます。関連するAtomの一貫した状態にAtomトランザクションが必要な場合、これは重要です。
抽象的で柔軟性が高い - このAPIにより、ユーザーは、どのように同期するかを記述する方法とは別に、どのAtomを同期するかを指定できます。これにより、コンポーネントは、実装を変更せずに、異なる環境で異なるシステムとAtomを使用し、同期できます。たとえば、コンポーネントは、スタンドアロンツールで使用するときはURLに永続化するAtomを使用し、別のツールに埋め込まれているときはカスタムユーザーデータベースに永続化できます。
検証と下位互換性 - 外部ソースからの状態を扱う際には、入力を検証することが重要です。状態がアプリのライフタイムを超えて永続化される場合、以前のバージョンの状態との下位互換性を考慮することも重要です。recoil-syncとrefineは、この機能を提供するのに役立ちます。
Atomと外部ストレージの複雑なマッピング - Atomと外部ストレージアイテム間に1対1のマッピングがない場合があります。Atomはアイテムの新しいバージョンを使用するように移行したり、複数のアイテムからプロパティを取得したり、複合状態の一部だけを使用したり、その他の複雑なマッピングを行う場合があります。
Reactフックまたはプロップスとの同期 - このライブラリを使用すると、AtomエフェクトからアクセスできないReactフックまたはプロップスとAtomを同期できます。

recoil-syncライブラリは、ブラウザのURLとの同期など、外部ストアの組み込み実装も提供しています。

基本的な考え方は、同期したい各AtomにsyncEffect()を追加し、次に<RecoilRoot>内に<RecoilSync>を追加して、これらのAtomをどのように同期するかを指定することです。<RecoilURLSyncJSON>などの組み込みストアを使用したり、独自のものを作成したり、異なるグループのAtomを異なるストアで同期することもできます。

例

URL永続化

これは、AtomをブラウザのURLと同期する簡単な例です。

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

次に、アプリケーションのルートで、<RecoilURLSyncJSON>を含めて、これらのタグ付きAtomをすべてURLと同期します。

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

以上です！これで、このAtomは初期ロード時にURLに基づいて状態を初期化し、状態の変更はURLを更新し、URLの変更（戻るボタンなど）はAtomを更新します。同期エフェクト、ストアの実装、URL永続化のガイドで、その他の例を参照してください。

インストール

Recoilのインストールガイドを参照し、recoil-syncを追加の依存関係として追加してください。

recoil-syncは、型リファインと入力検証のためにrefineライブラリも使用します。

例​

URL永続化​

インストール​

例

URL永続化

インストール