目次

前書き　①　②　③　④
基本チュートリアル　⑤　⑥　⑦
ガイド　⑧　⑨　⑩
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()