TypeScript＋React＋Recoilでselectorを使うサンプル

この記事は公開から1年以上経過しています。

TypeScript＋React＋RecoilでuseRecoilState,useRecoilValue,selector等を使うサンプル。

サンプルソースコード

create-react-appで作成したindex.tsxとApp.tsxをベースに必要な部分だけ抜粋して作成してます。

index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { RecoilRoot } from 'recoil';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
  <React.StrictMode>
    <RecoilRoot>
      <App />
    </RecoilRoot>
  </React.StrictMode>
);

App.tsx

import { useRecoilValue, selector, atom, useRecoilState } from 'recoil';

const countAtom = atom({
  key: 'count',
  default: 0,
});

const incrementSelector = selector({
  key: 'incrementedCount',
  get: ({ get }) => {
    const count = get(countAtom);
    return count + 1;
  },
});

function App() {
  const [count, setCount] = useRecoilState(countAtom);
  const incrementedCount = useRecoilValue(incrementSelector);

  return (
    <div className="App">
      <p>Recoil example</p>
      <p>Count: {count}</p>
      <p>Incremented count:{incrementedCount}</p>
      <button onClick={() => { setCount(count + 1) }}>Up</button>
      <button onClick={() => { setCount(count - 1) }}>Down</button>
    </div>
  );
}

export default App;

実行イメージ

プログラムを実行してUp/Downボタンを押下するとカウントが増減します。
Incremented count欄にはselectorによって現在のカウント値に1が加算された値を表示します。

以上です。