Recoil公式ドキュメント 翻訳⑩ ガイド-Stateの永続性

Recoilの公式ドキュメントをgoogle翻訳するとコードまで翻訳されてしまうのが面倒なのでQiitaにまとめてみます。

追々追加していきます。

公式ドキュメント

目次

• 前書き　①　②　③　④
• 基本チュートリアル　⑤　⑥　⑦
• ガイド
• ⑧非同期データクエリ
• ⑨非同期state・同期state
• ⑩Stateの永続性
• APIリファレンス
• Core　⑪　⑫　⑬　⑭　⑮　⑯　⑰　⑱　⑲　⑳　㉑　㉒　㉓　㉔　㉕　㉖　㉗
• 実用(utils)　㉘　㉙　㉚　㉛　㉜　㉝　㉞　㉟

※全目次は一番下にあります

---

Stateの永続性

Recoilを使用すると、atomを使用してアプリケーションのstateを保持できます。

---

重要なお知らせ

このAPIは現在開発中であり、今後変更される予定です。お楽しみに...

---

Stateの保存

stateを保存するには、atomの変更を登録し、新しいstateを記録します。
React effectsを使用して、個々のatomを登録できます。(*非同期state・同期state*参照)
ただし、Recoilはhookを提供し、useRecoilTransactionObserver_UNSTABLE()を使用してすべてのatomのstate変更を登録できるようにします。

サブスクリプションコールバックは、すべてのatom stateを提供し、変更されたatomを通知します。
ここから、好みのストレージとシリアライゼーションで変更を保存できます。
以下は、JSONを使った基本的な実装の例です。

function PersistenceObserver() {
  useRecoilTransactionObserver_UNSTABLE(({snapshot}) => {
    for (const modifiedAtom of snapshot.getNodes_UNSTABLE({isModified: true})) {
      const atomLoadable = snapshot.getLoadable(modifiedAtom);
      if (atomLoadable.state === 'hasValue') {
        Storage.setItem(
          modifiedAtom.key,
          JSON.stringify({value: atomLoadable.contents}),
        );
      }
    }
  });
}

記憶域は、ブラウザのURL履歴、LocalStorage、AsyncStorage、または任意の記憶域です。

すべてのatomを持続させたくないかもしれませんし、いくつかのatomは異なる持続性を持っているかもしれません。
atomごとのstate同期APIがまもなく登場するので、検討してみてください。

Stateの復元

stateをストレージに保存したら、アプリケーションをロードするときに復元する必要があります。これは、<RecoilRoot>コンポーネントのinitializeStateプロパティを使用して実行できます。

initializeStateは、MutableSnapshotに初期atom値を設定するset()メソッドを提供する関数です。この値は初期レンダリングに使用されます。useEffect()hookでatom値を手動で設定すると、最初にデフォルト値を使用した初期レンダリングが行われ、無効になったりフリッカーが発生したりする可能性があります。

次に基本的な例を示します。

const initializeState = ({set}) => {
  for(const [key, value] of Storage.entries()) {
    set(myLookupOfAtomWithKey(key), JSON.parse(value).value);
  }
}

return (
  <RecoilRoot initializeState={initializeState}>
    <PersistenceObserver />
    <SomeComponent />
  </RecoilRoot>
);

注：myLookupOfAtomWithKey()は、keyに基づいて登録されたatomを検索するための擬似コードです。一部のatomは動的に、またはatom族を介して定義されるので、これは最良のアプローチではありません。atomごとの同期効果を定義する新しいAPIが近く公開される予定なので、より使いやすくなるはずです。

同期中 State

また、ユーザーがURL永続性を使用してブラウザーの戻るボタンを押すなど、ストレージの非同期更新を現在のアプリケーションのstateと同期させることもできます。React effectを使用すると、これらの変更を適用し、変更されたatomの値を直接更新できます。

サンプルは近日公開予定...

下位互換性と値の検証

state記憶装置が信頼できない場合はどうすればよいでしょうか。
あるいは、使用しているatomまたはタイプを変更し、以前に永続化されたstateを操作する必要がある場合はどうすればよいでしょうか。

APIが完成し次第、これを処理する方法についてのドキュメントと例を追加予定...

---

参考サイト

・公式ドキュメント
・フィデリ・IT用語辞典 シリアライゼーション
・IT用語辞典 BINARY フリッカ
・みらい翻訳

---

全目次

• 前書き
• ①動機
• ②コアコンセプト
• ③インストール
• ④入門
• 基本チュートリアル
• ⑤概要
• ⑥Atoms
• ⑦Selectors
• ガイド
• ⑧非同期データクエリ
• ⑨非同期状態・同期状態
• ⑩Stateの永続性
• APIリファレンス
• Core
  
  •　⑪ <RecoilRoot />
  
  •　State
  
  　・　⑫atom()
  
  　・　⑬selector()
  
  　・　⑭Loadable
  
  　・　⑮useRecoilState()
  
  　・　⑯useRecoilValue()
  
  　・　⑰useSetRecoilState()
  
  　・　⑱useResetRecoilState()
  
  　・　⑲useRecoilValueLoadable()
  
  　・　⑳useRecoilStateLoadable()
  
  　・　㉑isRecoilValue()
  
  •　Snapshots
  
  　・　㉒Snapshot
  
  　・　㉓useRecoilTransactionObserver()
  
  　・　㉔useRecoilSnapshot()
  
  　・　㉕useGotoRecoilSnapshot()
  
  •　㉖useRecoilCallback()
  
  •　雑録(Misc)
  
  　・　㉗useRecoilBridgeAcrossReactRoots()
  
• 実用(utils)
  
  •　㉘atomFamily()
  
  •　㉙selectorFamily()
  
  •　㉚constSelector()
  
  •　㉛errorSelector()
  
  •　㉜waitForAll()
  
  •　㉝waitForAny()
  
  •　㉞waitForNone()
  
  •　㉟noWait()