Recoilの公式ドキュメントをgoogle翻訳するとコードまで翻訳されてしまうのが面倒なのでQiitaにまとめてみます。
追々追加していきます。(多分)
目次
- 前書き ① ② ③ ④
- 基本チュートリアル ⑤ ⑥ ⑦
- ガイド ⑧ ⑨ ⑩
- APIリファレンス
-
Core
• ⑪ <RecoilRoot />
• State ⑫ ⑬ ⑭ ⑮ ⑯ ⑰ ⑱ ⑲ ⑳ ㉑
• Snapshots
・ ㉒Snapshot
・ ㉓useRecoilTransactionObserver()
・ ㉔useRecoilSnapshot()
・ ㉕ useGotoRecoilSnapshot()
• ㉖useRecoilCallback()
• 雑録(Misc) ㉗
- 実用(utils) ㉘ ㉙ ㉚ ㉛ ㉜ ㉝ ㉞ ㉟
※全目次は一番下にあります
useGotoRecoilSnapshot(snapshot)
このhookは、snapshotをパラメータとして取り、現在の<Recoil Root>
stateをこのatomのstateに一致するように更新するコールバックを戻します。
function useGotoRecoilSnapshot(): Snapshot => void
トランザクションの例
重要な注意: この例は、すべてのstate変更に対して再描画するようにコンポーネントを登録するため、効率的ではありません。
function TransactionButton(): React.Node {
const snapshot = useRecoilSnapshot(); // Subscribe to all state changes
const modifiedSnapshot = snapshot.map(({set}) => {
set(atomA, x => x + 1);
set(atomB, x => x * 2);
});
const gotoSnapshot = useGotoRecoilSnapshot();
return <button onClick={() => gotoSnapshot(modifiedSnapshot)}>Perform Transaction</button>;
}
Time Travel Example
Time Travel Exampleを参照してください。
参考サイト
全目次
- 前書き
- ①動機
- ②コアコンセプト
- ③インストール
- ④入門
- 基本チュートリアル
- ⑤概要
- ⑥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()