JotaiJotai

状態
原始和灵活的 React 状态管理

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