JotaiJotai

状態
Primitive and flexible state management for React

可复位

带有 atomWithReset / useResetAtom 的原始可重置原子

import { useAtom } from 'jotai'
import { atomWithReset, useResetAtom } from 'jotai/utils'
const todoListAtom = atomWithReset([
{ description: 'Add a todo', checked: false },
])
const TodoList = () => {
const [todoList, setTodoList] = useAtom(todoListAtom)
const resetTodoList = useResetAtom(todoListAtom)
return (
<>
<ul>
{todoList.map((todo) => (
<li>{todo.description}</li>
))}
</ul>
<button
onClick={() =>
setTodoList((l) => [
...l,
{
description: `New todo ${new Date().toDateString()}`,
checked: false,
},
])
}>
Add todo
</button>
<button onClick={resetTodoList}>Reset</button>
</>
)
}

示例

带有 RESET 符号的派生原子

import { atom, useAtom } from 'jotai'
import { atomWithReset, useResetAtom, RESET } from 'jotai/utils'
const dollarsAtom = atomWithReset(0)
const centsAtom = atom(
(get) => get(dollarsAtom) * 100,
(get, set, newValue: number | typeof RESET) =>
set(dollarsAtom, newValue === RESET ? newValue : newValue / 100)
)
const ResetExample = () => {
const [dollars] = useAtom(dollarsAtom)
const setCents = useUpdateAtom(centsAtom)
const resetCents = useResetAtom(centsAtom)
return (
<>
<h3>Current balance ${dollars}</h3>
<button onClick={() => setCents(100)}>Set $1</button>
<button onClick={() => setCents(200)}>Set $2</button>
<button onClick={resetCents}>Reset</button>
</>
)
}

示例