LoginSignup
0
1

More than 3 years have passed since last update.

@Daichi44(Daichi Sugawara)

Recoil公式ドキュメント 翻訳⑲ APIリファレンス-Core-State-useRecoilValueLoadable()

Last updated at Posted at 2020-10-30

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

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

公式ドキュメント

目次

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

useRecoilValueLoadable(state)

このhookは、非同期selectorの値を読み取るために使用することを目的としています。
​このhookは、コンポーネントを指定されたstateに暗黙的に登録します。

​useRecoilValue()とは異なり、このhookは非同期selector(React Suspenseと連携する目的で)から読み込む際にErrorやPromiseをスローしません。​代わりに、このhookはLoadableオブジェクトを返します。

function useRecoilValueLoadable<T>(state: RecoilValue<T>): Loadable<T>
  • state: いくつかの非同期操作を持つatomまたはselector。​返されるロード可能ファイルのステータスは、指定されたstate selectorのステータスによって異なります。

​インタフェースの現在のstateのLoadableを返します。

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

サンプルコード

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;
  }
}

参考サイト

・公式ドキュメント
・React Suspense
・みらい翻訳

全目次

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1