プロジェクト作成

npx create-react-app recoil-ts --template typescript
cd recoil-ts

nekoniki

Recoilのインストール

npmでも可

yarn add recoil

nekoniki

Atom

データストア
keyが一意である必要がある
atom()で宣言

import { atom } from "recoil";

export const hogeState = atom<string>({
    key: "hoge",
    default: 'default hoge value',
});

nekoniki

Selector

Atomの値を加工した結果を返す
副作用もここで処理する
Selector内で扱っているAtomの値が更新されると再計算される
selector()で宣言

import { atom, selector } from "recoil";

export const hogeState = atom<string>({
    key: "hoge",
    default: 'default hoge value',
});

export const hogeLengthSelector = selector<number>({
  key: "hogeLength",
  get: ({ get }) => {
    // get()で任意のatomの値を取得
    const hoge: string = get(hogeState);
    return hoge?.length || 0;
  },
});

nekoniki

AtomやSelectorをコンポーネントで使用する

RecoilRootでRecoilを使用するコンポーネントをラップする必要がある
- ReduxにおけるProviderと同じ
AtomやSelectorの値を取得するにはuseRecoilValueを使う

import { RecoilRoot, atom, selector, useRecoilValue} from "recoil";

export const hogeState = atom<string>({
    key: "hoge",
    default: 'default hoge value',
});

export const hogeLengthSelector = selector<number>({
  key: "hogeLength",
  get: ({ get }) => {
    // get()で任意のatomの値を取得
    const hoge: string = get(hogeState);
    return hoge?.length || 0;
  },
});

const Hoge: React.FC = () => {
  const hoge: string = useRecoilValue(hogeState);
  const hogeLength: number = useRecoilValue(hogeLengthSelector);
  return(
    <>
      <p>{`hoge is ${hoge}`}</p>
      <p>{`hoge length is ${hogeLength.toString()}`}</p>
    </>
  );
}

const App: React.FC = () => {
  return (
    <RecoilRoot>
      <Hoge />
    </RecoilRoot>
  );
}

nekoniki

Atomの値を更新する

useSetRecoilStateにAtomを渡してSetterを発行する
- useStateを使ってsetStateする関数を取得するイメージ

import { useCallback } from "react";
import { useSetRecoilState, useRecoilValue, SetterOrUpdater } from "recoil";

// ...割愛

const Hoge: React.FC = () => {
  const hoge: string = useRecoilValue(hogeState);
  const setHoge: SetterOrUpdater<string> = useSetRecoilState(hogeState);
  const onChange = useCallback(
    (event: React.ChangeEvent<HTMLInputElement>) => {
      setHoge(event.target.value);
    },
    [setHoge]
  );
  
  return(
    <>
      <p>{`hoge is ${hoge}`}</p>
      <input type="text" value={hoge} onChange={onChange} />
    </>
  );
}

const App: React.FC = () => {
  return (
    <RecoilRoot>
      <Hoge />
    </RecoilRoot>
  );
}

nekoniki

上記を踏まえて作成したソース一式

nekoniki

以下記事で清書したので本件はクローズ。