React状態管理ライブラリ「Recoil」を使ってTodoアプリを作る

執筆日: 2021-08-13

概要

Reactでは大きなアプリでは状態管理が重要になってきます。

Reactでの状態管理はReduxが有名ですが、これは思想から独特なフローがあります。理解するのに少し時間を要する可能性があります。
他の方法としてContext APIを使用する方法がありますが、再レンダリング問題があり、不必要なコンポーネントまで再レンダリングされかねません。

そんな時に、これらの問題を解消するFacebookが提唱しているライブラリ「Recoil」を発見しました。

今回はRecoilを使用したTodoアプリを作成しつつ、使用感をまとめていきます。

Recoilの概要

Recoilは、Facebookによって提唱された実験的な状態管理ライブラリです。
「Atom」や「Selector」と呼ばれる単位を使用してアプリケーションデータを管理していきます。

  • 各Atomには一意のキーと管理するデータの一部が含まれています。
  • 各Selectorは複数のAtomにもとづく派生状態の一部で、Atom・他のSelectorを受け取る純粋な関数です。

これらの単位をHooks APIで操作しつつ状態管理を行っていきます。

TODOアプリ

TODOアプリをcodesandboxで作成しました。
注目していただきたいのは、storeディレクトリにあるatomやselector部分です。

Atomは一つずつ状態を管理できる

atom関数を使用すると、それぞれが状態管理として機能します。

  • useRecoilStateuseStateのように、値と更新する関数を定義できます。
  • useRecoilValueで値のみを取得できます。
  • useSetRecoilStateで値を更新する関数を定義できます。

このように使用できるAPIが他にもありますので、参考にしてみてください。

https://recoiljs.org/docs/api-reference/core/RecoilRoot

Selectorで再計算

Selectorは派生状態と言われ、他のデータに依存する動的データを構築できるため、強力な概念となっています。

今回ではtodoリストのフィルタリングに使用されていました。

store/index.js
const filteredTodoListState = selector({
  key: "filteredTodoListState",
  get: ({ get }) => {
    const filter = get(todoListFilterState);
    const list = get(todoState);

    switch (filter) {
      case "COMPLETE":
        return list.filter((item) => item.isComplete);
      case "IDLE":
        return list.filter((item) => !item.isComplete);
      default:
        return list;
    }
  }
});

この場合、todoListFilterStatetodoStateが変更された場合に検知して処理が走ります。

使用する際は、useRecoilValueを使用して値を取得します。

結論

Recoilはシンプルな構造であり、理解しやすい状態管理ライブラリといえそうです。

特にReduxのように独特なフローを踏まなくても、それぞれで状態を定義でき、値の変更に応じた再計算が簡単にできるのは魅力的です。

みなさんも使用してみて手軽さを実感してみてください。

参考

https://recoiljs.org/

運営について

Natural Tearoomはシステム開発会社フロントエンドエンジニアがんちゃんが運営するメディアです。
フロントエンド技術を中心に発信しています。

· プライバシーポリシー

SNS

© 2021 天然珈琲店