Recoil公式ドキュメント 翻訳⑫ APIリファレンス-Core-State-atom()

Recoilの公式ドキュメントをgoogle翻訳するとコードまで翻訳されてしまうのが面倒なのでQiitaにまとめてみます。

追々追加していきます。(多分)

公式ドキュメント

目次

• 前書き　①　②　③　④
• 基本チュートリアル　⑤　⑥　⑦
• ガイド　⑧　⑨　⑩
• APIリファレンス
• Core
  
  •　⑪ <RecoilRoot />
  
  •　State
  
  　・　⑫ atom()
  
  　・　⑬selector()
  
  　・　⑭Loadable
  
  　・　⑮useRecoilState()
  
  　・　⑯useRecoilValue()
  
  　・　⑰useSetRecoilState()
  
  　・　⑱useResetRecoilState()
  
  　・　⑲useRecoilValueLoadable()
  
  　・　⑳useRecoilStateLoadable()
  
  　・　㉑isRecoilValue()
  
  •　Snapshots　㉒　㉓　㉔　㉕
  
  •　㉖useRecoilCallback()
  
  •　雑録(Misc)　㉗
  
• 実用(utils)　㉘　㉙　㉚　㉛　㉜　㉝　㉞　㉟

※全目次は一番下にあります

---

atom(options)

atomはRecoilのstateを表します。atom()関数は書き込み可能なRecoilStateオブジェクトを返します。

---

function atom<T>({
  key: string,
  default: T | Promise<T> | RecoilValue<T>,

  effects_UNSTABLE?: $ReadOnlyArray<AtomEffect<T>>,

  dangerouslyAllowMutability?: boolean,
}): RecoilState<T>

• key - atomを内部的に識別するために使用される一意の文字列。この文字列は、アプリケーション全体で他のatomおよびselectorに対して一意である必要があります。
• default - atom、Promise、または同じタイプの値を表す別のatomまたはselectorの初期値。
• effects_UNSTABLE - atomのAtom Effectsのオプションの配列。
• dangerouslyAllowMutability - Recoilは、atomのstateの変化に依存して、atomを再描画に使用するコンポーネントに通知するタイミングを決定します。atomの値が変更された場合、これをバイパスし、登録するコンポーネントに適切に通知せずにstateを変更する可能性があります。これを防ぐために、保存されている値はすべて凍結されます。場合によっては、このオプションを使用してこれをオーバーライドすることが望ましいこともあります。

---

ほとんどの場合、次のhookを使用してatomを操作します。

• useRecoilState():このhookは、atomに対する読み取りと書き込みの両方を行う場合に使用します。このhookは、コンポーネントをatomに登録します。
• useRecoilValue():このhookは、atomの読み取りのみを行う場合に使用します。このhookは、コンポーネントをatomに登録します。
• useSetRecoilState():このhookは、atomへの書き込みのみを行う場合に使用します。
• useResetRecoilState():このhookを使用して、atomをデフォルト値にリセットします。

コンポーネントを登録せずにatomの値を読み取る必要があるまれなケースについては、useRecoilCallback()を参照してください。

atomは静的な値で初期化することも、Promiseや同じ型の値を表すRecoilValueで初期化することもできます。
Promiseは保留中の可能性があり、デフォルトselectorは非同期かもしれないため、これはatomの値も保留中の可能性があり、読み込み時にエラーをスローするかもしれないということを意味します。
atomの設定時にPromiseを割り当てることはできません。非同期関数にはselectorを使用してください。

atomを使ってPromiseやRecoilValueを直接格納することはできませんが、オブジェクトにラップすることはできます。Promiseは変更可能(ミュータブル)かもしれないことに注意してください。atomは純粋であれば関数に設定することができますが、そのためにはupdater形式のセッターを使う必要があるかもしれません。(例: set (myAtom, ()=>myFunc);)

サンプルコード

import {atom, useRecoilState} from 'recoil';

const counter = atom({
  key: 'myCounter',
  default: 0,
});

function Counter() {
  const [count, setCount] = useRecoilState(counter);
  const incrementByOne = () => setCount(count + 1);

  return (
    <div>
      Count: {count}
      <br />
      <button onClick={incrementByOne}>Increment</button>
    </div>
  );
}

---

参考サイト

・公式ドキュメント
・みらい翻訳

---

全目次

• 前書き
• ①動機
• ②コアコンセプト
• ③インストール
• ④入門
• 基本チュートリアル
• ⑤概要
• ⑥Atoms
• ⑦Selectors
• ガイド
• ⑧非同期データクエリ
• ⑨非同期状態・同期状態
• ⑩Stateの永続性
• APIリファレンス
• Core
  
  •　⑪ <RecoilRoot />
  
  •　State
  
  　・　⑫ atom()
  
  　・　⑬selector()
  
  　・　⑭Loadable
  
  　・　⑮useRecoilState()
  
  　・　⑯useRecoilValue()
  
  　・　⑰useSetRecoilState()
  
  　・　⑱useResetRecoilState()
  
  　・　⑲useRecoilValueLoadable()
  
  　・　⑳useRecoilStateLoadable()
  
  　・　㉑isRecoilValue()
  
  •　Snapshots
  
  　・　㉒Snapshot
  
  　・　㉓useRecoilTransactionObserver()
  
  　・　㉔useRecoilSnapshot()
  
  　・　㉕useGotoRecoilSnapshot()
  
  •　㉖useRecoilCallback()
  
  •　雑録(Misc)
  
  　・　㉗useRecoilBridgeAcrossReactRoots()
  
• 実用(utils)
  
  •　㉘atomFamily()
  
  •　㉙selectorFamily()
  
  •　㉚constSelector()
  
  •　㉛errorSelector()
  
  •　㉜waitForAll()
  
  •　㉝waitForAny()
  
  •　㉞waitForNone()
  
  •　㉟noWait()