LaunchCartな日々

LaunchCartとともに歩む日々を綴った
ブログです

Reactの状態管理ライブラリー「Recoil」を触ってみました

テクニック

Reactの状態管理ライブラリー「Recoil」を触ってみました

Recoiとは、React上でわかりやすく状態管理を行うためのライブラリーで、Reactを開発しているFacebookが開発しています。

Reactはコンポーネント指向というコンポーネント(部品)単位の構造のツリー構造によって構成されています。
元々のReactの状態管理はコンポーネント単位が基本ですが、親の状態が子孫の状態に反映される場合も頻繁にあり、そういった場合は 親 > 子 のように情報を伝達する仕組みを使う必要がありました。
しかしこのツリー構造が深く広くなるほどその伝達は 親 > 子 > 孫 > ひ孫 > … のように複雑なものとなっていき、管理が難しくなります。
また状態管理で推奨されるアーキテクチャの Flux は情報の流れを確実なものにしますが、そのためのプログラムの設計・実装は簡単ではなく、メモリリークに繋がりやすい側面もありました。

そこで登場したのが Redux という Flux を拡張し、状態管理をグローバルに扱えるようにしてくれるライブラリでした。
この動きを受けて、Reactに公式としてReduxと同様に状態管理できる仕組みとして導入されたのが Context API です(過去に試してみた記事はこちら)。
公式ということもあり、ContextAPIは浸透してきましたが、まだ問題がありました。
ContextAPIはひとつのRootに一つの状態しか格納できなため、複数の状態を格納するためには複数のContextを用意する必要がありました。またこの構造は、コンポーネント指向のメリットであるコードの分割を困難にしてしまいます。
また、非同期なデータに対するサポートも含まれていなかったため、非同期に対応させるためにノウハウが必要でした。

こういった問題を解決するべくRecoilが登場してきました。
RecoilはひとつのRootを設置するだけで、複数のグローバルな状態を格納することができる仕組みを提供してくれます。
また、非同期をサポートしているため、非同期への対応に独自のノウハウも必要ありません。

私も試しに触ってみましたが、ContextAPIと比べると格段に簡単に利用することができました。

↓公式のチュートリアルをベースに試しに作ってみたDEMO
DEMO

試すにあたって、以下のサイトを参考にさせていただきました。

Installation | Recoil

Recoil the next state management library for React | by Tharaka Romesh | The Startup | Medium

Recoil vs Redux | The Ultimate React State Management Face-Off | by Chandu | Medium

Recoil – Reactの新しい状態管理ライブラリ | infoQ

Recoil – Facebook’s own State Management Library – DEV

 

Recoilの導入方法はとてもシンプルです。

npm install recoil もしくは yarn add recoil によりrecoilをインストールし、AppなどのRecoilで状態管理したいツリーのルートにRecilRootを設置します。

その後は、atom、selectorを中心に、RecoilのAPIを使ってRecioilRoot傘下のコンポーネントから状態を登録、変更することが可能になります。あ

今回は主要なAPIであるatomとselectorについて説明したいと思います。

atom

状態を登録するためのAPIで、Recoilの状態管理はここから始まります。

キー(key)と初期値(default)をオブジェクトとして引数に渡してあげるだけで、登録できます。
今回の例はtodoListなのでデフォルト値が空の配列ですが、
数値や文字列などを直接値として設定することも可能です。

selector

現在の状態からデータを処理して返すオブジェクトを登録するためのAPIです。フィルターなどに使うことができます。

状態の取得には useRecoilState を使います。

値の取得には useRecoilValue を使います。

selector で処理したデータを取得するためには useRecoilState の引数にselectorで登録したオブジェクトを指定します。

状態の更新は useSetRecoilState で取得した関数を利用して行います。

 

コンポーネントのどこからでも扱える分、データの整理に注意が必要にはなりますが、
使い勝手はとてもいいと感じました。
今回は試すところまでできませんでしたが、非同期をサポートしているのもかなり大きいと思います。(ContextAPIで試したときはかなり苦労しました)

以下、ご参考までに今回試しに作ったTodoListのコード全文です。

 

この記事を書いた人
Ninomiyaのアイコン

Ninomiya

Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。

資料ダウンロード

送信いただいたメールアドレス宛に、資料のダウンロードURLを送付いたします。