Recoil公式ドキュメント 翻訳㉜ APIリファレンス-Core-実用(Utils)-waitForAll()

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

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

公式ドキュメント

目次

• 前書き　①　②　③　④
• 基本チュートリアル　⑤　⑥　⑦
• ガイド　⑧　⑨　⑩
• APIリファレンス
• Core　⑪　⑫　⑬　⑭　⑮　⑯　⑰　⑱　⑲　⑳　㉑　㉒　㉓　㉔　㉕　㉖　㉗
• 実用(utils)
  
  •　㉘atomFamily()
  
  •　㉙selectorFamily()
  
  •　㉚constSelector()
  
  •　㉛errorSelector()
  
  •　**㉜waitForAll()**</font> <br> •　[㉝waitForAny()](https://qiita.com/Daichi44/items/e9720f6ceb7cea57b2ce) <br> •　[㉞waitForNone()](https://qiita.com/Daichi44/items/c9bb722022a003d72aa9) <br> •　[㉟noWait()`](https://qiita.com/Daichi44/items/ca11fcef04d764ef13a8)
  

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

---

waitForAll(dependencies)

複数の非同期依存関係を同時に評価することを可能にする並行性ヘルパー。

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

---

function waitForAll(dependencies: Array<RecoilValue<>>):
  RecoilValueReadOnly<UnwrappedArray>

function waitForAll(dependencies: {[string]: RecoilValue<>}):
  RecoilValueReadOnly<UnwrappedObject>

---

​並行性ヘルパーはselectorとして提供されるため、ReactコンポーネントのRecoil hookによって、Recoil selectorの依存関係として、またはRecoil stateが使用されるすべての場所で使用できます。

サンプルコード

function FriendsInfo() {
  const [friendA, friendB] = useRecoilValue(
    waitForAll([friendAState, friendBState])
  );
  return (
    <div>
      Friend A Name: {friendA.name}
      Friend B Name: {friendB.name}
    </div>
  );
}

const friendsInfoQuery = selector({
  key: 'FriendsInfoQuery',
  get: ({get}) => {
    const {friendList} = get(currentUserInfoQuery);
    const friends = get(waitForAll(
      friendList.map(friendID => userInfoQuery(friendID))
    ));
    return friends;
  },
});

const customerInfoQuery = selectorFamily({
  key: 'CustomerInfoQuery',
  get: id => ({get}) => {
    const {info, invoices, payments} = get(waitForAll({
      info: customerInfoQuery(id),
      invoices: invoicesQuery(id),
      payments: paymentsQuery(id),
    }));

    return {
      name: info.name,
      transactions: [
        ...invoices,
        ...payments,
      ],
    };
  },
});

---

参考サイト

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

---

全目次

• 前書き
• ①動機
• ②コアコンセプト
• ③インストール
• ④入門
• 基本チュートリアル
• ⑤概要
• ⑥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()**</font> <br> •　[㉝waitForAny()](https://qiita.com/Daichi44/items/e9720f6ceb7cea57b2ce) <br> •　[㉞waitForNone()](https://qiita.com/Daichi44/items/c9bb722022a003d72aa9) <br> •　[㉟noWait()`](https://qiita.com/Daichi44/items/ca11fcef04d764ef13a8)