React の Recoil ライブラリの使い方を具体例をまじえて解説【 TypeScript 】

// npmを使う場合
npm install recoil

// yarnを使う場合
yarn install recoil

import React from "react";
import { RecoilRoot} from "recoil";
import { Component} from "./Component"

function App() {
  return (
    <RecoilRoot>
      <Component/>
    </RecoilRoot>
  );
}

import { atom } from "recoil";

// 初期値に0を設定する例
const initialState: number = 0;

export const sampleAtom = atom({
  // atomを呼び出すための一意な文字列
  key: "sampleAtom",
  // 初期値
  default: initialState
});

import { selector } from "recoil";
import { sampleAtom } from "./atoms";

export const sampleSelector = selector({
  key: "sampleSelector",
  get: ({ get }) => {
    // atomから取得したstateに1を足して返却する処理
    const state: number = get(sampleAtom);
    return state + 1;
  }
});

src
├ App.tsx
├ TodoItem.tsx
├ TodoItemCreator.tsx
├ TodoList.tsx
├ TodoListFilters.tsx
├ TodoListStats.tsx
├ atoms.ts
├ index.tsx
└ type.ts

// Todoの型定義
export type Todo = {
  // todoに割り振る識別数字
  id: number;
  // todoとして入力する文字列
  text: string;
  // todoに取り組み終わったどうかの識別
  isComplete: boolean;
};

import { atom } from "recoil";
import { Todo } from "./type";

// todoリストの初期値
const todoList: Todo[] = [
  { id: 10000, text: "牛乳と卵を買ってくる", isComplete: true },
  { id: 10001, text: "燃えるごみを捨てる", isComplete: false },
  { id: 10002, text: "子供に今月分のお小遣いを渡す", isComplete: false }
];

// todoリストのstate
export const todoListState = atom({
  key: "todoListState",
  default: todoList
});

// todoリストの表示条件のstate
export const todoListFilterState = atom({
  key: "todoListFilterState",
  default: "Show All"
});

import { selector } from "recoil";
import { todoListState, todoListFilterState } from "./atoms";

// filterメソッドによって絞り込んだtodoを返却する
export const filteredTodoListState = selector({
  key: "filteredTodoListState ",
  get: ({ get }) => {
    const filter = get(todoListFilterState);
    const list = get(todoListState);

    switch (filter) {
      case "Show Completed":
        return list.filter((todo) => todo.isComplete);
      case "Show Uncompleted":
        return list.filter((todo) => !todo.isComplete);
      default:
        return list;
    }
  }
});

// todoリストについての統計情報を返却する
export const todoListStatsState = selector({
  key: "todoListStatsState",
  get: ({ get }) => {
    const todoList = get(todoListState);
    const totalNum = todoList.length;
    const totalCompletedNum = todoList.filter((todo) => todo.isComplete).length;
    const totalUncompletedNum = totalNum - totalCompletedNum;
    const percentCompleted =
      totalNum === 0 ? 0 : (totalCompletedNum / totalNum) * 100;

    return {
      totalNum,
      totalCompletedNum,
      totalUncompletedNum,
      percentCompleted
    };
  }
});

import { render } from "react-dom";
import App from "./App";
import "bootstrap/dist/css/bootstrap.min.css";

const rootElement = document.getElementById("root");
render(<App />, rootElement);

import { RecoilRoot } from "recoil";
import { TodoList } from "./TodoList";
import { Container } from "react-bootstrap";

export default function App() {
  return (
    <RecoilRoot>
      <Container className="mt-4 mb-4">
        <TodoList />
      </Container>
    </RecoilRoot>
  );
}

import React from "react";
import { useRecoilValue } from "recoil";
import { filteredTodoListState } from "./selector";
import { TodoListStats } from "./TodoListStats";
import { TodoListFilters } from "./TodoListFilters";
import { TodoItemCreator } from "./TodoItemCreator";
import { TodoItem } from "./TodoItem";
import { ListGroup } from "react-bootstrap";

export const TodoList: React.VFC = () => {
  // useRecoilValueフックを使って、selectorのフィルタリングずみtodoリストを取得
  const filterdTodoList = useRecoilValue(filteredTodoListState);

  return (
    <>
      <TodoListStats />
      <TodoItemCreator />

      <div style={{ display: "flex", justifyContent: "space-between" }}>
        <p>todoリスト</p>
        <TodoListFilters />
      </div>

      <ListGroup>
        {filterdTodoList.map((todo) => (
          <ListGroup.Item key={todo.id}>
            <TodoItem todo={todo} />
          </ListGroup.Item>
        ))}
      </ListGroup>
    </>
  );
};

import React from "react";
import { Todo } from "./type";
import { useRecoilState } from "recoil";
import { todoListState } from "./atoms";
import { Button } from "react-bootstrap";

export const TodoItem: React.VFC<{ todo: Todo }> = ({ todo }) => {
  // 途中省略 
  return (
    // 途中省略 
  );
};

  // useRecoilStateフックを使って、atomのtodoListStateから『todoリスト本体とsetterメソッドを取得
  const [todoList, setTodoList] = useRecoilState(todoListState);

  // todoListにfindIndexを適用して、propsとして渡ってきたtodoが『todoListのどのインデックスの要素なのか』を探している
  const index = todoList.findIndex((todoItem) => todoItem === todo);

  // todoリストと『todoの編集内容』を組み合わせて、新規todoリストを作る。
  // 要素の差し替えは、indexを目印に使っている。
  const replaceTodoAtIndex = (arr: Todo[], index: number, newTodo: Todo) => {
    return [...arr.slice(0, index), newTodo, ...arr.slice(index + 1)];
  };

  // todoリストと『todoの編集内容』を組み合わせて、新規todoリストを作る。
  // 要素の除外は、indexを目印に使っている。
  const removeTodoAtIndex = (arr: Todo[], index: number) => {
    return [...arr.slice(0, index), ...arr.slice(index + 1)];
  };

  // todoの編集内容を反映してtodoリストを更新する関数
  const editTodoText = (value: string): void => {
    const newList = replaceTodoAtIndex(todoList, index, {
      ...todo,
      text: value
    });

    setTodoList(newList);
  };

  // todoが完了したかどうかを更新する関数
  const toggleTodoCompletion = (): void => {
    const newList = replaceTodoAtIndex(todoList, index, {
      ...todo,
      isComplete: !todo.isComplete
    });

    setTodoList(newList);
  };

  // todoを除外して、todoリストを更新する関数
  const deleteItem = () => {
    const newList = removeTodoAtIndex(todoList, index);

    setTodoList(newList);
  };

  return (
    <div
      style={{
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center"
      }}
    >
      <input
        type="text"
        value={todo.text}
        onChange={(e) => editTodoText(e.target.value)}
      />
      <div>
        <input
          style={{ marginRight: "5px" }}
          type="checkbox"
          checked={todo.isComplete}
          onChange={toggleTodoCompletion}
        />
        完了
      </div>

      <Button variant="danger" onClick={deleteItem}>
        削除
      </Button>
    </div>
  );

import React from "react";
import { Todo } from "./type";
import { useRecoilState } from "recoil";
import { todoListState } from "./atoms";
import { Button } from "react-bootstrap";

export const TodoItem: React.VFC<{ todo: Todo }> = ({ todo }) => {
  // useRecoilStateフックを使って、atomのtodoListStateからtodoリスト本体とsetterメソッドを取得
  const [todoList, setTodoList] = useRecoilState(todoListState);
  // todoListにfindIndexを適用して、propsとして渡ってきたtodoが『todoListのどのインデックスの要素なのか』を探している
  const index = todoList.findIndex((todoItem) => todoItem === todo);

  // todoリストと『todoの編集内容』を組み合わせて新規配列を作る。
  // 要素の差し替えは、indexを目印に使っている。
  const replaceTodoAtIndex = (arr: Todo[], index: number, newTodo: Todo) => {
    return [...arr.slice(0, index), newTodo, ...arr.slice(index + 1)];
  };

  // todoリストから『todoの編集内容』を組み合わせて新規配列を作る。
  // 要素の除外は、indexを目印に使っている。
  const removeTodoAtIndex = (arr: Todo[], index: number) => {
    return [...arr.slice(0, index), ...arr.slice(index + 1)];
  };

  // todoの編集内容を反映してtodoリストを更新する関数
  const editTodoText = (value: string): void => {
    const newList = replaceTodoAtIndex(todoList, index, {
      ...todo,
      text: value
    });

    setTodoList(newList);
  };

  // todoが完了したかどうかを更新する関数
  const toggleTodoCompletion = (): void => {
    const newList = replaceTodoAtIndex(todoList, index, {
      ...todo,
      isComplete: !todo.isComplete
    });

    setTodoList(newList);
  };

  // todoを除外して、todoリストを更新する関数
  const deleteItem = () => {
    const newList = removeTodoAtIndex(todoList, index);

    setTodoList(newList);
  };

  return (
    <div
      style={{
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center"
      }}
    >
      <input
        type="text"
        value={todo.text}
        onChange={(e) => editTodoText(e.target.value)}
      />
      <div>
        <input
          style={{ marginRight: "5px" }}
          type="checkbox"
          checked={todo.isComplete}
          onChange={toggleTodoCompletion}
        />
        完了
      </div>

      <Button variant="danger" onClick={deleteItem}>
        削除
      </Button>
    </div>
  );
};