はじめに

Create React App

RecoilはReactのための状態管理ライブラリです。そのため、Recoilを使用するには、Reactをインストールして実行する必要があります。Reactアプリケーションをブートストラップする最も簡単で推奨される方法は、Create React Appを使用することです。

npx create-react-app my-app

npx はnpm 5.2以降に付属するパッケージランナーです。 古いnpmバージョンはこちら。

Create React Appをインストールするその他の方法については、公式ドキュメントを参照してください。

インストール

Recoilパッケージはnpmにあります。最新の安定バージョンをインストールするには、次のコマンドを実行します。

npm install recoil

または、yarnを使用している場合

yarn add recoil

または、bowerを使用している場合

bower install --save recoil

RecoilRoot

Recoilの状態を使用するコンポーネントは、親ツリーのどこかにRecoilRootが表示される必要があります。これを配置するのに適した場所は、ルートコンポーネントです。

import React from 'react';
import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
} from 'recoil';

function App() {
  return (
    <RecoilRoot>
      <CharacterCounter />
    </RecoilRoot>
  );
}

次のセクションでは、CharacterCounterコンポーネントを実装します。

アトム

**アトム**は**状態**の一部を表します。アトムは、どのコンポーネントからでも読み書きできます。アトムの値を読み取るコンポーネントは、そのアトムに暗黙的に**購読**されるため、アトムの更新は、そのアトムに購読されているすべてのコンポーネントの再レンダリングを招きます。

const textState = atom({
  key: 'textState', // unique ID (with respect to other atoms/selectors)
  default: '', // default value (aka initial value)
});

アトムの読み取り*と*書き込みを行う必要があるコンポーネントは、以下に示すようにuseRecoilState()を使用する必要があります。

function CharacterCounter() {
  return (
    <div>
      <TextInput />
      <CharacterCount />
    </div>
  );
}

function TextInput() {
  const [text, setText] = useRecoilState(textState);

  const onChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <br />
      Echo: {text}
    </div>
  );
}

セレクタ

**セレクタ**は、**派生状態**の一部を表します。派生状態は、状態の**変換**です。派生状態は、指定された状態を何らかの方法で変更する純粋関数に状態を渡した出力と考えることができます。

const charCountState = selector({
  key: 'charCountState', // unique ID (with respect to other atoms/selectors)
  get: ({get}) => {
    const text = get(textState);

    return text.length;
  },
});

useRecoilValue()フックを使用して、charCountStateの値を読み取ることができます。

function CharacterCount() {
  const count = useRecoilValue(charCountState);

  return <>Character Count: {count}</>;
}

デモ

以下は完成品です。

エコー

文字カウント0