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
包裹它以避免死循环。