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>
      <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;