Closed8

Recoil+Typescript環境構築から実装まで

nekonikinekoniki

プロジェクト作成

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

Atom

  • データストア
  • keyが一意である必要がある
  • atom()で宣言
import { atom } from "recoil";

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

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;
  },
});
nekonikinekoniki

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

  • RecoilRootRecoilを使用するコンポーネントをラップする必要がある
    • ReduxにおけるProviderと同じ
  • AtomSelectorの値を取得するには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>
  );
}
nekonikinekoniki

Atomの値を更新する

  • useSetRecoilStateAtomを渡して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>
  );
}
このスクラップは2021/02/22にクローズされました