【Unスクラップ】解読日記Recoil編

Recoilの管理下にうつす

recoilの使い方
_app.tsxのコンポーネントの記述を以下のように変更する

<RecoilRoot>
  <Component>
</RecoilRoot>

Atomsの作成
Atomsとは、stateをぶち込む箱のことだよ。
この箱に、「stateをください」とか「setterをください」っていうと指定したstateやsetterを切り出してくれます。
そんなAtomsの作成方法ですが、以下の点を覚えておきましょう。

• 一意なキーが必要
• default値（初期値）の設定が必要
• これは任意ですが、atomに型をつけておいたほうが良いでしょう

以下のように記述します。

// atom/user.ts(ファイル名は任意でいいが、監修的にatomというフォルダを作成するみたいだね）
import { atom } from "recoil";

type User = {
  name: string;
  age: number;
  isMan: boolean;
}

// グローバルなstateとして使用したいのでエクスポートしておきましょう
export const userState = atom<User>({
  key: "user",　// 一位な値でなければならない
  default: null,// 初期値null　もし値が打ち込まれたらそれはUser型だよって感じ
})

私には、atom()というコンストラクタに対して、箱の情報が入ったオブジェクトを渡しているように見えます。
以下の関数を使用することでAtomから必要な機能を切り出すことが可能です。

• useRecoilState(): StateとSetterを切り出す
• useRecoilValue(): Stateを切りだす
• useSetRecoilState()：Setterを切り出す