waitForAll

有时你的组件中有多个异步原子：

const dogsAtom = atom(async (get) => {
  const response = await fetch("/dogs");
  return await response.json();
});
const catsAtom = atom(async (get) => {
  const response = await fetch("/cats");
  return await response.json();
});

const App = () => {
  const [dogs] = useAtom(dogsAtom);
  const [cats] = useAtom(catsAtom);
  // ...
};

然而，这将同时开始获取一个，这不是最优的——如果我们能尽快开始获取两个会更好。

waitForAll 实用程序是一个并发 helper，它允许我们评估多个异步原子：

const dogsAtom = atom(async (get) => {
  const response = await fetch("/dogs");
  return await response.json();
});
const catsAtom = atom(async (get) => {
  const response = await fetch("/cats");
  return await response.json();
});

const App = () => {
  const [[dogs, cats]] = useAtom(waitForAll([dogsAtom, catsAtom]));
  // or ...
  const [dogs, cats] = useAtomValue(waitForAll([dogsAtom, catsAtom]));
  // ...
};

您还可以在原子内使用 waitForAll - 也可以为它们命名以提高可读性：

const dogsAtom = atom(async (get) => {
  const response = await fetch("/dogs");
  return await response.json();
});
const catsAtom = atom(async (get) => {
  const response = await fetch("/cats");
  return await response.json();
});

const animalsAtom = waitForAll({
  dogs: dogsAtom,
  cats: catsAtom,
});

const App = () => {
  const [{ dogs, cats }] = useAtom(animalsAtom);
  // or ...
  const { dogs, cats } = useAtomValue(animalsAtom);
  // ...
};

注意：如果你在 waitForAll 中使用了一个对象 并且 waitForAll 在渲染函数中，你需要用 useMemo 包裹它以避免死循环。

Codesandbox