Recoil公式ドキュメント 翻訳⑭ APIリファレンス-Core-State-Loadable

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

追々追加していきます。(多分)

公式ドキュメント

目次

• 前書き　①　②　③　④
• 基本チュートリアル　⑤　⑥　⑦
• ガイド　⑧　⑨　⑩
• APIリファレンス
• Core
  
  •　⑪ <RecoilRoot />
  
  •　State
  
  　・　⑫atom()
  
  　・　⑬selector()
  
  　・　⑭Loadable
  
  　・　⑮useRecoilState()
  
  　・　⑯useRecoilValue()
  
  　・　⑰useSetRecoilState()
  
  　・　⑱useResetRecoilState()
  
  　・　⑲useRecoilValueLoadable()
  
  　・　⑳useRecoilStateLoadable()
  
  　・　㉑isRecoilValue()
  
  •　Snapshots　㉒　㉓　㉔　㉕
  
  •　㉖useRecoilCallback()
  
  •　雑録(Misc)　㉗
  
• 実用(utils)　㉘　㉙　㉚　㉛　㉜　㉝　㉞　㉟

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

---

class Loadable

​Loadableオブジェクトは、Recoil atomまたはselectorの現在のstateを表します。​このstateは、値が使用可能であるか、エラーstateであるか、または非同期の解決を保留している可能性があります。​Loadableには次のインタフェースがあります。

• ​state: atomまたはselectorの現在のstate。​指定できる値は、'hasValue'(値あり), 'hasError'(エラーあり), または'loading'(ロード中)です。
• contents: Loadableによって表される値。​stateがhasValueの場合は実際の値、stateがhasErrorの場合はスローされたErrorオブジェクト、そしてstateがloadingの場合はtoPromise()を使って値のPromiseを取得することができます。

​ロード可能なオブジェクトには、現在のstateにアクセスするためのヘルパーメソッドも含まれています。
​次のAPIが不安定であるとします:

• getValue() - React SuspenseおよびRecoil selectorのセマンティックに一致する値にアクセスするメソッド。​stateに値がある場合は値を返し、エラーがある場合はそのエラーをスローし、まだ保留中の場合は実行またはレンダリングを中断して保留中のstateを伝播します。
• toPromise() - selectorが解決したときに解決するPromiseを返します。​selectorが同期しているか、既に解決されている場合、即座に解決されるPromiseを返します。
• valueMaybe() - 使用可能な場合は値を返し、使用できない場合はundefinedを返します。
• valueOrThrow() - 使用可能な場合は値を返し、使用できない場合はエラーをスローします。
• ​map() - Loadableの値を変換する関数を取り、変換された値で新しいLoadableを返します。​変換関数は値のパラメータを取得し、新しい値を返します。​スローされたエラーやアラートを伝播することもできます。

サンプルコード

function UserInfo({userID}) {
  const userNameLoadable = useRecoilValueLoadable(userNameQuery(userID));
  switch (userNameLoadable.state) {
    case 'hasValue':
      return <div>{userNameLoadable.contents}</div>;
    case 'loading':
      return <div>Loading...</div>;
    case 'hasError':
      throw userNameLoadable.contents;
  }
}

---

参考サイト

・公式ドキュメント
・MDN Semantics (セマンティクス)
・みらい翻訳

---

全目次

• 前書き
• ①動機
• ②コアコンセプト
• ③インストール
• ④入門
• 基本チュートリアル
• ⑤概要
• ⑥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()