【Recoil入門】Selectorの使い方

今回はRecoilのselectorについて説明します。
Recoilの環境構築、atom、useRecoilStateについての説明はこちら↓。

selector

selectorはatomや他のselectorからの派生stateです。
atomや他のselectorの値を何らかの計算や加工をして返します。
また、atomや他のselectorに何らかの計算や加工をした値を設定することもできます。

selectorの作成

selectorはアプリケーション全体で一意なキー、getプロパティ、setプロパティを設定します。

• key: アプリケーション全体で一意なキーを設定。他のatomやselectorと重複不可。

• get: atomや他のselectorの値を何らかの計算や加工して取得することができます。

  • get(): atomや他のselectorの値を返します。引数にatomや他のselectorを取ります。この関数に渡されたatom/selectorの値が更新された場合、コンポーネントは再レンダリングされます。

• set: setプロパティはオプションです。このプロパティがある場合、selectorはatomや他のselectorを何らかの計算や加工をした値で更新することができます。第１引数にgetやsetなどの関数をとり、第2引数に新しい値を取ります。

  • get(): atomや他のselectorの値を返します。引数にatomや他のselectorを取ります。この関数は渡されたatom/selectorをsubscribeしないため、atom/selectorの値が更新されても再レンダリングされません。
  • set(): atomや他のselectorを何らかの計算や加工をした値で更新します。第1引数にatomや他のselector、第2引数に新しい値を取ります。
  • reset(): atomの値をdefaultにリセットします。引数にatomを取ります。

src/selectors/mySelector

const mySelector = selector({
  // 一意のキー
  key: 'mySelector',
  get: ({get}) => get(myAtom)　* 2, //atomの値を取得して２倍して返す
  set: ({set}, newValue) => set(myAtom, newValue) // atomに新しい値を設定する
});

selectorを使用する

以下selectorの使用例です。

import React from 'react';
import ReactDOM from 'react-dom';
import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
} from 'recoil';

const counterAtom = atom({
  key: 'counterAtom',
  default: 0,
})

const counterSelector = selector({
  key: 'counterSelector',
  get: ({get}) => get(counterAtom) ** 2,
  set: ({set}, newValue) => set(counterAtom, newValue)
});

const Counter = () => {
  const count = useRecoilValue(counterAtom)
  const [squareCount, setSquareCount] = useRecoilState(counterSelector)
  return(
    <>
      <p>count: {count}</p>
      <p>square: {squareCount}</p>
      <button onClick={() => setSquareCount(count + 1)}>Increment</button>
    </>
  )
}

const App = () => (
  <Counter/>
);

ReactDOM.render(
  <RecoilRoot>
    <App/>
  </RecoilRoot>,
  document.getElementById('root')
);