JotaiJotai

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

splitAtom

当您想要为列表中的每个元素获取一个原子时,splitAtom utils 很有用。 它适用于包含列表的 读/写 原子。 当用在这样的原子上时,它返回一个原子 它本身包含一个原子列表,每个原子对应于原始列表中的相应项目。

简化的类型签名是:

type SplitAtom = <Item>(arrayAtom: PrimitiveAtom<Array<Item>>): Atom<Array<PrimitiveAtom<Item>>>

此外,splitAtom 返回的原子在write 方向包含一个调度函数(自 v1.6.4 起), 当您想要一种简单的方法来使用 remove、insertmove` 等操作修改原始原子时,这很有用。

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

codesandbox

import { Provider, atom, useAtom, PrimitiveAtom } from "jotai";
import { splitAtom } from "jotai/utils";
import "./styles.css";
const initialState = [
{
task: "help the town",
done: false,
},
{
task: "feed the dragon",
done: false,
},
];
const todosAtom = atom(initialState);
const todoAtomsAtom = splitAtom(todosAtom);
type TodoType = typeof initialState[number];
const TodoItem = ({
todoAtom,
remove,
}: {
todoAtom: PrimitiveAtom<TodoType>;
remove: () => void;
}) => {
const [todo, setTodo] = useAtom(todoAtom);
return (
<div>
<input
value={todo.task}
onChange={(e) => {
setTodo((oldValue) => ({ ...oldValue, task: e.target.value }));
}}
/>
<input
type="checkbox"
checked={todo.done}
onChange={() => {
setTodo((oldValue) => ({ ...oldValue, done: !oldValue.done }));
}}
/>
<button onClick={remove}>remove</button>
</div>
);
};
const TodoList = () => {
const [todoAtoms, dispatch] = useAtom(todoAtomsAtom);
return (
<ul>
{todoAtoms.map((todoAtom) => (
<TodoItem
todoAtom={todoAtom}
remove={() => dispatch({ type: "remove", atom: todoAtom })}
/>
))}
</ul>
);
};
const App = () => (
<Provider>
<TodoList />
</Provider>
);
export default App;