Recoilライブラリを触ってみる

Recoilライブラリを
触ってみる
執筆者：トビウオ

Reactにおけるstate管理
• メモ帳アプリを考える
• 日付とメッセージ
• 追加、削除できる
• フィルター機能
• 件数の表示機能

• 必要なstateとメソ
ッドを考えるとこ
んな感じ
• filteredMessagesは
messagesから生成す
る

• 必要なstateとメソッドを考えるとこんな感じ

stateをどう利用するか
A. stateを直接生成して管理する←前のページ
B. React.createContextを使う
C. Recoilライブラリを使う←今回の内容

Recoilライブラリの概念
Atom (小さなstate) Atom Atom Selectorの出力
Selectorが加工
stateを利用するUI
getのみ
getやsetが行える

参考：Reduxライブラリ
store
(大きなstate)
Actionに従い
Reducerが加工
store’
(大きなstate)
getのみ
Action (操作)
1つのstoreをActionで加工す
ることで、データや操作の流
れを一方向にできるのが強み

参考：useContext
context
(state+method)
getなど
setなど
• ReduxやRecoilより簡素で
自由度は高い
• 冒頭で説明したコードが
これにあたる

Recoilライブラリの導入
• Reactを使うこと前提のstate管理ライブラリ
• npmパッケージで提供されている
• 例えば npm install recoil として導入する

Recoilライブラリの使い方
• 管理したいstateの単位をAtomとする
• getterはuseRecoilState、setterはuseSetRecoilStateで取
得できる

Recoilライブラリの使い方
• Atomを加工した値を返すためのSelectorを作成する
• getterはuseRecoilValueで取得できる

Recomendados