JotaiJotai

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

abortableAtom

abortableAtom 用于定义具有中止性的派生原子。 它使用 AbortController 以便您可以中止异步函数。 在开始新计算(调用 read 函数)之前触发中止。

如何使用它:

const readOnlyDerivedAtom = abortableAtom(async (get, { signal }) => {
// 使用信号中止你的函数
});
const writableDerivedAtom = abortableAtom(
async (get, { signal }) => {
// 使用信号中止你的函数
},
(get, set, arg) => {
// ...
}
);

signal 值为 AbortSignal。 您可以检查 signal.aborted 布尔值,或将 abort 事件与 addEventListener 一起使用。

对于 fetch 用例,我们可以简单地传递 signal

有关 fetch 的用法,请参见下面的示例。

codesandbox

import { Suspense } from "react";
import { atom, useAtom } from "jotai";
import { abortableAtom } from "jotai/utils";
const userIdAtom = atom(1);
const userAtom = abortableAtom(async (get, { signal }) => {
const userId = get(userIdAtom);
const response = await fetch(
`https://jsonplaceholder.typicode.com/users/${userId}?_delay=2000`,
{ signal }
);
return response.json();
});
const Controls = () => {
const [userId, setUserId] = useAtom(userIdAtom);
return (
<div>
User Id: {userId}
<button onClick={() => setUserId((c) => c - 1)}>Prev</button>
<button onClick={() => setUserId((c) => c + 1)}>Next</button>
</div>
);
};
const UserName = () => {
const [user] = useAtom(userAtom);
return <div>User name: {user.name}</div>;
};
const App = () => (
<>
<Controls />
<Suspense fallback="Loading...">
<UserName />
</Suspense>
</>
);
export default App;