Open1
【React Recoil】Recoilによる状態管理の仕方
yu.miyoshi概要
Recoilを用いた状態管理方法について・使い方についての備忘録になります。
Atom
複数のコンポーネントをまたいでpropsを用い、ステートを渡さずに
対象となる範囲の複数のコンポーネント間で使用することがグローバルなステートをRecoilではAtomと呼びます。
const numberState = atom({
key: "numberState",
default: 0
});
keyはAtomを識別する文字列（グローバルにユニークなものを用いる）
Atomの宣言はステートを宣言するだけです。
そのあとどのように使われるかは記述せず、ReactのuseStateという機能と似ています。
指定したAtomを使うときには、RecoilのuseRecoilStateを使います。
const AddButton = () => {
const [count, setCount] = useRecoilState(numberState);
return (
<p>
<button onClick={() => setCount(num => num + 1)}>{count}</button>
</p>
);
};
countがそのAtomの現在の値で、(グローバルなステートから取得してきた)setCountに引数を与え、Atomの値を更新させます。
atom({ ... })は、ステートを作る部分だけでということだけであり、従来のように「useStateによって手に入れられるステートの値」ではなく、「ステートそのもの」という概念です。
その他のフック
- useRecoilState → 読み書き両対応
- useRecoilValue → 読み取り専用
- useSetRecoilState → 書き込み専用
useRecoilValue
// useRecoilValueを使う場合
const count = useRecoilValue(numberState)
useSetRecoilState
// useSetRecoilStateを使う場合
const setNumber = useSetRecoilState(numberState);
参考サイト