2023/08/04の勉強会で発表されたものです。

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

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

3. Reactにおけるstate管理
• 必要なstateとメソ
ッドを考えるとこ
んな感じ
• filteredMessagesは
messagesから生成す
る

4. Reactにおけるstate管理
• 必要なstateとメソッドを考えるとこんな感じ

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

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

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

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

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

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

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