recoil-sync NPMパッケージの初期オープンソースリリース！ Recoil Syncは、Recoilの状態を外部システムと同期するのに役立つアドオンライブラリを提供します。単純な非同期データクエリは、セレクタまたはuseEffect()を介して実装することも、個々のアトムの双方向同期にアトムエフェクトを使用することもできます。 recoil-syncアドオンパッケージは、いくつかの追加機能を提供します。
- アトミックトランザクションのバッチ処理 - 複数のアトムの更新を、外部システムとの単一のトランザクションとしてまとめてバッチ処理できます。これは、関連するアトムの状態の整合性を保つためにアトミックトランザクションが必要な場合に重要になる可能性があります。
- 抽象的で柔軟性がある - このAPIにより、ユーザーは同期する方法のメカニズムを記述することとは別に、同期するアトムを指定できます。これにより、コンポーネントは実装を変更することなく、異なる環境で異なるシステムと同期してアトムを使用できます。たとえば、コンポーネントは、スタンドアロンツールで使用される場合はURLに永続化するアトムを使用し、別のツールに埋め込まれる場合はカスタムユーザーデータベースに永続化することができます。
- 検証と後方互換性 - 外部ソースからの状態を扱う場合、入力を検証することが重要です。状態がアプリのライフタイムを超えて永続化される場合、以前のバージョンの状態との後方互換性を考慮することも重要になる可能性があります。
recoil-syncとrefineは、この機能を提供するのに役立ちます。 - アトムから外部ストレージへの複雑なマッピング - アトムと外部ストレージアイテムの間に1対1のマッピングがない場合があります。アトムは、新しいバージョンのアイテムを使用するように移行したり、複数のアイテムからプロパティを取得したり、一部の複合状態の一部を取得したり、その他の複雑なマッピングを行う場合があります。
- 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の永続化ガイドで、さらに例をご覧ください。