Commencer

Create React App

Recoil est une bibliothèque de gestion d'état pour React, vous devez donc avoir installé React pour utiliser Recoil. Le moyen le plus simple et recommandé pour démarrer une application React est d'utiliser Create React App:

npx create-react-app my-app

npx est un outil d'exécution de paquets fourni avec npm 5.2+ et supérieur, voir les instructions pour les anciennes versions de npm (https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f).

Pour plus de façons d'installer Create React App, consultez la documentation officielle.

Installation

Le paquet Recoil est hébergé sur npm. Pour installer la dernière version stable, exécutez la commande suivante:

npm install recoil

Ou si vous utilisez yarn:

yarn add recoil

RecoilRoot

Les composants qui utilisent l'état recoil ont besoin que RecoilRoot apparaisse quelque part dans l'arborescence parente. Un bon endroit pour mettre cela est dans votre composant racine:

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

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

Nous implémenterons le composant CharacterCounter dans la section suivante.

Atome

Un atome représente un morceau d'état. Les atomes peuvent être lus et écrits depuis n'importe quel composant. Les composants qui lisent la valeur d'un atome sont implicitement abonnés à cet atome, donc toute mise à jour d'atome entraînera un nouveau rendu de tous les composants abonnés à cet atome:

const textState = atom({
  key: 'textState', // unique ID (with respect to other atoms/selectors)
  default: '', // valeur par défaut (alias valeur initials)
});

Les composants qui doivent lire et écrire sur un atome doivent utiliser useRecoilState () comme indiqué ci-dessous:

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

Sélecteur

Un sélecteur représente un morceau d'état dérivé. L'état dérivé est une transformation d'état. Vous pouvez considérer l'état dérivé comme la sortie de l'état passant à une fonction pure qui modifie l'état donné d'une manière ou d'une autre:

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

    return text.length;
  },
});

Nous pouvons utiliser le hook useRecoilValue() pour lire la valeur de charCountState:

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

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

Demo

Ci-dessous le produit fini:

Echo:

Character Count: 0