👮

Recoilのコア概念「AtomとSelector」について

2 min read 2

Recoilとは

Reactの状態管理ライブラリです
ちなみに他の状態管理としてReduxなどがあります。

最新バージョン

Recoil 0.4(2021/08/13時点)

インストール方法

# npm
npm install recoil
# yarn
yarn add recoil

Atom

Atomとは状態の単位です。Atomが更新されるとコンポーネントは再レンダリングされます。
同じAtomが複数のコンポーネントで使われるとき、すべてのコンポーネントがそのAtomを共有します。

使い方

atom関数を使って定義できます。
keyの値はユニークである必要があります。

const fontSizeState = atom({
  key: 'fontSizeState',
  default: 14,
});

ReactのuseStateと同じような書き方で、useRecoilStateをRecoilでは使います。
useStateとの違いはコンポーネント間で状態が共有されるところです。

function FontButton() {
  const [fontSize, setFontSize] = useRecoilState(fontSizeState);
  return (
    <button onClick={() => setFontSize((size) => size + 1)} style={{fontSize}}>
      Click to Enlarge
    </button>
  );
}

// 別コンポーネントで状態が共有されるためボタンをクリックすると
// FontButtonのfontSizeと下記TextのfontSizeは同じになる
function Text() {
  const [fontSize, setFontSize] = useRecoilState(fontSizeState);
  return <p style={{fontSize}}>This text will increase in size too.</p>;
}

Selector

selectorはatomまたは他のselectorを入力として受け取る関数で、同期的または非同期的に状態を変化させます。入力として受け取ったatom、または入力として受け取ったselectorが更新されるとselectorは再計算されます。また、selectorが変わったときに再レンダリングされます。
getプロパティの引数を使ってatomと他のselectorにアクセスできます。
下記の例ではfontSizeStateというatomを入力として受け取っています。

const fontSizeLabelState = selector({
  key: 'fontSizeLabelState',
  get: ({get}) => {
    // fontSizeStateがatomとなる
    const fontSize = get(fontSizeState);
    const unit = 'px';

    return `${fontSize}${unit}`;
  },
});

値の読み取り方法

useRecoilValue()を使うことで値の読み取りを行うことができます。

function FontButton() {
  const [fontSize, setFontSize] = useRecoilState(fontSizeState);
  const fontSizeLabel = useRecoilValue(fontSizeLabelState);

  return (
    <>
      <div>Current font size: {fontSizeLabel}</div>

      <button onClick={() => setFontSize(fontSize + 1)} style={{fontSize}}>
        Click to Enlarge
      </button>
    </>
  );
}

詳しくは書きませんがatomselectorにはそれぞれ使えるAPIがあります。

TypeScript

公式に記載の通り、TypeScriptのサポートはされているようですが、使い方は現時点ではよくわかりませんでした🙇‍♀️
GitHubをみるとTypeScriptの使用率が2.2%[1]なところからまだまだこれからなのかなと思います
Recoilの言語の割合
Recoilの言語の割合

参考

https://recoiljs.org/
脚注
  1. 2021/08/13時点 ↩︎

Discussion

recoil本体はflowtypeで書かれています。typescriptはnpmから使う時用の型定義ですね。

教えていただきありがとうございます。
flowtypeは、初めて聞いたので自分で調べてみます。

ログインするとコメントできます