Recoil公式ドキュメント 翻訳⑥ 基本チュートリアル-Atoms

Recoilの公式ドキュメントをgoogle翻訳するとコードまで翻訳されてしまうのが面倒なのでQiitaにまとめてみます。

追々追加していきます。(多分)

公式ドキュメント

目次

• 前書き　①　②　③　④
• 基本チュートリアル
• ⑤概要
• ⑥Atoms
• ⑦Selectors
• ガイド　⑧　⑨　⑩
• APIリファレンス
• Core　⑪　⑫　⑬　⑭　⑮　⑯　⑰　⑱　⑲　⑳　㉑　㉒　㉓　㉔　㉕　㉖　㉗
• 実用(utils)　㉘　㉙　㉚　㉛　㉜　㉝　㉞　㉟

※全目次は一番下にあります

---

Atom

atomには、アプリケーションstateの信頼できる情報源(source)が含まれています。
このtodoリストでは、sourceはオブジェクトの配列であり、各オブジェクトはtodo項目を表します。

リストatomをtodoListStateとして呼び出し、atom()関数を使用して作成します。

const todoListState = atom({
  key: 'todoListState',
  default: [],
});

atomに一意のkeyを与え、デフォルト値を空の配列に設定します。
このatomの内容を読み取るには、TodoListコンポーネントのuseRecoilValue()hookを使用します。

function TodoList() {
  const todoList = useRecoilValue(todoListState);

  return (
    <>
      {/* <TodoListStats /> */}
      {/* <TodoListFilters /> */}
      <TodoItemCreator />

      {todoList.map((todoItem) => (
        <TodoItem key={todoItem.id} item={todoItem} />
      ))}
    </>
  );
}

コメントアウトされたコンポーネントは、次のセクションで実装されます。

新しいtodo項目を作成するには、todoListStateの内容を更新する設定関数にアクセスする必要があります。
useSetRecoilState()hookを使用して、TodoItemCreatorコンポーネントに設定関数を取得できます。

function TodoItemCreator() {
  const [inputValue, setInputValue] = useState('');
  const setTodoList = useSetRecoilState(todoListState);

  const addItem = () => {
    setTodoList((oldTodoList) => [
      ...oldTodoList,
      {
        id: getId(),
        text: inputValue,
        isComplete: false,
      },
    ]);
    setInputValue('');
  };

  const onChange = ({target: {value}}) => {
    setInputValue(value);
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={onChange} />
      <button onClick={addItem}>Add</button>
    </div>
  );
}

// 一意のIDを作成するためのユーティリティ
let id = 0;
function getId() {
  return id++;
}

古いtodoリスト(oldTodoList)に基づいて新しいtodoリストを作成できるように、設定関数のupdater形式を使用していることに注意してください。

TodoItemコンポーネントは、todo項目の値を表示しますが、そのテキストを変更したり項目を削除したりすることもできます。todoListStateを読み取って、項目テキストを更新し、完了としてマークし、削除するために使用する設定関数を取得するには、useRecoilState()を使用します。

function TodoItem({item}) {
  const [todoList, setTodoList] = useRecoilState(todoListState);
  const index = todoList.findIndex((listItem) => listItem === item);

  const editItemText = ({target: {value}}) => {
    const newList = replaceItemAtIndex(todoList, index, {
      ...item,
      text: value,
    });

    setTodoList(newList);
  };

  const toggleItemCompletion = () => {
    const newList = replaceItemAtIndex(todoList, index, {
      ...item,
      isComplete: !item.isComplete,
    });

    setTodoList(newList);
  };

  const deleteItem = () => {
    const newList = removeItemAtIndex(todoList, index);

    setTodoList(newList);
  };

  return (
    <div>
      <input type="text" value={item.text} onChange={editItemText} />
      <input
        type="checkbox"
        checked={item.isComplete}
        onChange={toggleItemCompletion}
      />
      <button onClick={deleteItem}>X</button>
    </div>
  );
}

function replaceItemAtIndex(arr, index, newValue) {
  return [...arr.slice(0, index), newValue, ...arr.slice(index + 1)];
}

function removeItemAtIndex(arr, index) {
  return [...arr.slice(0, index), ...arr.slice(index + 1)];
}

これで、完全に機能するToDoリストができました！
次のセクションでは、selectorを使用してリストを次のレベルアップする方法について説明します。

---

>>Demoを作りました

---

参考サイト

・公式ドキュメント
・みらい翻訳
・Demoのリポジトリ

---

全目次

• 前書き
• ①動機
• ②コアコンセプト
• ③インストール
• ④入門
• 基本チュートリアル
• ⑤概要
• ⑥Atoms
• ⑦Selectors
• ガイド
• ⑧非同期データクエリ
• ⑨非同期状態・同期状態
• ⑩Stateの永続性
• APIリファレンス
• Core
  
  •　⑪ <RecoilRoot />
  
  •　State
  
  　・　⑫atom()
  
  　・　⑬selector()
  
  　・　⑭Loadable
  
  　・　⑮useRecoilState()
  
  　・　⑯useRecoilValue()
  
  　・　⑰useSetRecoilState()
  
  　・　⑱useResetRecoilState()
  
  　・　⑲useRecoilValueLoadable()
  
  　・　⑳useRecoilStateLoadable()
  
  　・　㉑isRecoilValue()
  
  •　Snapshots
  
  　・　㉒Snapshot
  
  　・　㉓useRecoilTransactionObserver()
  
  　・　㉔useRecoilSnapshot()
  
  　・　㉕useGotoRecoilSnapshot()
  
  •　㉖useRecoilCallback()
  
  •　雑録(Misc)
  
  　・　㉗useRecoilBridgeAcrossReactRoots()
  
• 実用(utils)
  
  •　㉘atomFamily()
  
  •　㉙selectorFamily()
  
  •　㉚constSelector()
  
  •　㉛errorSelector()
  
  •　㉜waitForAll()
  
  •　㉝waitForAny()
  
  •　㉞waitForNone()
  
  •　㉟noWait()