いま注目されている状態管理ライブラリのRecoilについて調べた
RecoilはMetaが開発中のglobal状態管理ライブラリ
Reduxのシングルステートストアの欠点を克服し、複数のデータストアを持てるのが特徴
基本的な使い方はドキュメントにあるように、Atomというステートオブジェクトを使用する
Atom
時間的なローカルステート管理ができる
一意となる文字列型のグローバルステートを宣言する
const textState = atom({ key: 'textState', // unique ID (with respect to other atoms/selectors) default: '', // default value (aka initial value) });
それをReactのuseStateと同じように呼び出すことができる
const [text, setText] = useRecoilState(textState);
もしもatomで宣言したstateと利用するReactコンポーネントが同じファイルにある場合は空間的にローカルになるが、そのReactコンポーネントがアンマウントされてもグローバルに生き続けるという特徴を持つ
Selector
ステートを加工して使いたい場合はselectorを利用する
const charCountState = selector({ key: 'charCountState', // unique ID (with respect to other atoms/selectors) get: ({get}) => { const text = get(textState); return text.length; }, });
これで入力した文字列の桁数を返却する関数ができたので、useRecoilValue()を使って出力する
function CharacterCount() { const count = useRecoilValue(charCountState); return <>Character Count: {count}</>; }
まだ、Experimentalな状態なので悩ましいが使ってみたい https://github.com/facebookexperimental/Recoil
