BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース Recoil - Reactの新しい状態管理ライブラリ

Recoil - Reactの新しい状態管理ライブラリ

ブックマーク

原文(投稿日:2020/05/19)へのリンク

RecoilはFacebookによる新しい実験的な状態管理ライブラリであり、より大きなアプリケーションで既存のContext APIを使用するときに直面する問題の多くに対処する。

Reactは主にUIライブラリであるため、開発者はしばしばReactと一緒に状態管理ソリューションを使用してデータ処理を簡素化する。

既存の状態管理ソリューションの多くは、2014年にReactによって導入されたFluxアーキテクチャに基づいている。ただし、ReduxやMobXなどのライブラリは、アプリケーションの状態が一貫していることを保証するが、多くのアプリケーションで正当化が難しいオーバーヘッドが伴う。

これに対処するために、ReactはContext APIと呼ばれる簡単な代替手段を導入した。これにより、開発者は各レベルでpropsを手渡す必要がなく、コンポーネントツリーを通じてデータを共有できる。

Recoilは、本格的な状態管理システムを避けたいが、Context APIによる制約が強すぎると感じる開発者にソリューションを提供する。

Recoilは、公式ドキュメントで述べられているように、Context APIの3つの問題を解決する:

  1. コンポーネントの状態は、共通の祖先にプッシュすることによってのみ共有できるが、これには、再レンダリングする必要がある巨大なツリーが含まれる場合がある。
  2. Contextは単一の値のみを保存でき、それぞれが独自のコンシューマを持つ無期限の値セットではない。
  3. これらはどちらも、ツリーのリーフ (状態が使用される場所) からツリーのトップ (状態が存在する場所) のコード分割を困難にする。

Recoilは、AtomとSelectorを使用してアプリケーションデータを管理する。各Atomには一意のキーとそれが管理するデータの一部が含まれ、各Selectorは複数のAtomに基づくことができる派生状態の一部を表す。

2つを組み合わせる方法の優れた例は、2つのAtomと1つのSelectorを含む人気のあるTODOアプリケーションである。

アプリケーションデータを管理するために、2つのAtomを作成する。1つ目は生のリストアイテムを含み、2つ目はフィルタ (「完全」、「不完全」、「すべて」など) で構成される。

TODOリストを表示するには、選択したフィルタに基づいてToDo項目をフィルタで除外するSelectorを使用する。

完全なTODOリストのチュートリアルと優れた入門ガイドについては、公式ドキュメントをご覧ください。

RecoilはMITライセンスの下でリリースされ、Githubで入手できる。

Recoilは実験的なソリューションと考えており、プロダクションアプリケーションではまだ使用できない可能性があることを忘れないでください。

この記事に星をつける

おすすめ度
スタイル

特集コンテンツ一覧

BT