Recoil apiまとめてみた①～atom、selector～

Recoilを使う機会があったので、備忘として残します。
まずは、メインのapiであるatomとselectorをまとめます。

atom
selector

atom

使い方サンプル

type Hoge = {
  id: string;
  name: string;
};

const hogeState = atom<Hoge>({
  key: 'hoge',
  default: {
    id: 'hogeId',
    name: 'hogeName',
  },
});

引数

名前	型	備考
`key`	`string`	アプリケーションないの全atom、selectorで一意な文字列
`default?`	`T \| Promise<T> \| Loadable<T> \| WrappedValue<T> \| RecoilValue<T>`	初期値
`effects?`	`$ReadOnlyArray<AtomEffect<T>>`	`AtomEffect`の配列 `AtomEffect`では、atomの更新タイミングなどを検知して処理を記述できるよう。ログ出力や履歴管理などがメインどころか。
`dangerouslyAllowMutability?`	`boolean`	オブジェクトの変更を許可するか

戻り値

型	備考
RecoilState<T>	`useRecoilState`や`useRecoilValue`等の hooks に渡すことで、atomにアクセスできる

selector

使い方サンプル

// {id: string; name: string}のHogeに、extraField: string を追加して返すセレクタ
const hogeSelector = selector({
  key: 'hogeSelector',
  get: ({ get }) => ({ ...get(hogeState), extraField: 'hi' }),
  set: ({ set }, newValue) => set(hogeState, newValue),
});

引数

名前	型	備考
`key`	`string`	アプリケーションないの全atom、selectorで一意な文字列
`get`	`({ get: GetRecoilValue, getCallback: GetCallback, }) => T \| Promise<T> \| Loadable<T> \| WrappedValue<T> \| RecoilValue<T>`	他のatom、selectorから値を取得するようのインターフェース
`get.get()`	`GetRecoilValue`	・他のatom、selectorから値を取得できる関数・この関数に渡したatom、selectorが変化したら、このselectorも再評価される
`get.getCallback()`	`GetCallback`	・よくわからない・・・わかったら追記しよう
`set?`	`( { get: GetRecoilValue, set: SetRecoilState, reset: ResetRecoilState }, newValue: T \| DefaultValue ) => void;`	他のatom、selectorに値をセットするためのインターフェース
`set.get()`	`GetRecoilValue`	・他のatom、selectorから値を取得できる関数・渡されたatom、selectorを購読しない。　→変化しても、このselectorは再評価されないってことかな？
`set.set()`	`SetRecoilState`	・第一引数は`RecoilState`（セットするatom）・第二引数はセットする値
`set.reset()`	`ResetRecoilState`	状態を初期値にリセットするための関数。`RecoilState`を受けとる。
`dangerouslyAllowMutability?`	`boolean`	オブジェクトの変更を許可するか

戻り値

上記引数の指定によって戻り値が変わる

条件	型	備考
`get`のみ指定	`RecoilValueReadOnly`	読み取り専用の状態
`set`も指定	`RecoilState`	読み取り・書き込み可能の状態