splitAtom
当您想要为列表中的每个元素获取一个原子时,splitAtom
utils 很有用。
它适用于包含列表的 读/写 原子。 当用在这样的原子上时,它返回一个原子
它本身包含一个原子列表,每个原子对应于原始列表中的相应项目。
简化的类型签名是:
type SplitAtom = <Item>(arrayAtom: PrimitiveAtom<Array<Item>>): Atom<Array<PrimitiveAtom<Item>>>
此外,splitAtom
返回的原子在write
方向包含一个调度函数(自 v1.6.4 起),
当您想要一种简单的方法来使用 remove
、insert和
move` 等操作修改原始原子时,这很有用。
有关用法,请参见下面的示例。
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><inputvalue={todo.task}onChange={(e) => {setTodo((oldValue) => ({ ...oldValue, task: e.target.value }));}}/><inputtype="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) => (<TodoItemtodoAtom={todoAtom}remove={() => dispatch({ type: "remove", atom: todoAtom })}/>))}</ul>);};const App = () => (<Provider><TodoList /></Provider>);export default App;