目次

前書き　①　②　③　④
基本チュートリアル　⑤　⑥　⑦
ガイド　⑧　⑨　⑩
APIリファレンス
Core　⑪　⑫　⑬　⑭　⑮　⑯　⑰　⑱　⑲　⑳　㉑　㉒　㉓　㉔　㉕　㉖　㉗
実用(utils)

•　㉘atomFamily()

•　㉙selectorFamily()

•　㉚constSelector()

•　㉛errorSelector()

•　㉜waitForAll()

•　㉝waitForAny()

•　㉞ waitForNone()

•　㉟noWait()

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

waitForNone(dependencies)

要求された依存関係の現在のstateに対するLoadableのセットを返す並行性ヘルパー。

依存関係は、タプル配列またはオブジェクト内の名前付き依存関係として指定できます。

function waitForNone(dependencies: Array<RecoilValue<>>):
  RecoilValueReadOnly<UnwrappedArrayOfLoadables>

function waitForNone(dependencies: {[string]: RecoilValue<>}):
  RecoilValueReadOnly<UnwrappedObjectOfLoadables>

waitForNone()はwaitForAll()と似ていますが、値を直接返すのではなく、すぐに戻り、各依存関係に対してLoadableを返す点が異なります。noWait()と似ていますが、一度に複数の依存関係を要求できる点が異なります。

このヘルパーは、部分的なデータを操作する場合や、別のデータが使用可能になったときにUIを段階的に更新する場合に便利です。

Incremental Loading の例

次の使用例は、複数のレイヤを持つグラフを表示します。各画層には、コストがかかる可能性のあるデータクエリーがあります。ペンディング(保留)中の各レイヤーの編集ボックスを使用してグラフを即座にレンダリングし、そのレイヤーのデータが入力されるたびにグラフを更新して新しい各レイヤーを追加します。クエリーでエラーが発生した画層がある場合、その画層だけにエラーメッセージが表示され、残りの画層は引き続きレンダリングされます。

function MyChart({layerQueries}: {layerQueries: Array<RecoilValue<Layer>>}) {
  const layerLoadables = useRecoilValue(waitForNone(layerQueries));

  return (
    <Chart>
      {layerLoadables.map((layerLoadable, i) => {
        switch (layerLoadable.state) {
          case 'hasValue':
            return <Layer key={i} data={layerLoadable.contents} />;
          case 'hasError':
            return <LayerErrorBadge key={i} error={layerLoadable.contents} />;
          case 'loading':
            return <LayerWithSpinner key={i} />;
        }
      })}
    </Chart>
  );
}

参考サイト

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

全目次

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