LoginSignup
3
1

More than 3 years have passed since last update.

@Daichi44(Daichi Sugawara)

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

Last updated at Posted at 2020-10-29

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

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

公式ドキュメント

目次

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

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

参考サイト

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

全目次

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
1