Comment Recoil m’a enthousiasmé par l’avenir de la gestion des états dans React

Online Coding Courses for Kids

Ne vous inquiétez pas, c’est aussi simple que de créer un atome. Heureusement, Recoil a un bel ensemble de crochets prédéfinis qui nous permet de lire et d’écrire sur notre atome si nous en avons besoin.
Voici une liste rapide des crochets les plus courants que vous êtes susceptible d’utiliser:

  • useRecoilState(state), le frère jumeau de React.useState()– Vous avez la valeur d’état et un setter qui écrase votre état actuel.
  • useRecoilValue(state – Avec ce crochet, vous recevez uniquement la valeur actuelle de votre état. Le composant qui utilise ce crochet est automatiquement abonné à tout changement d’état.
  • useSetRecoilState(state) – Comme son nom l’indique, ce crochet est destiné à être utilisé uniquement pour mettre à jour la valeur d’état sans la lire.

Ok, assez de théorie sèche. Voyons quelques exemples.

Exemple useRecoilState

Comme je l’ai déjà mentionné, useRecoilState est utilisé de la même manière que React.useState(). Je crois que beaucoup d’entre vous savent déjà par cœur comment cela fonctionne. Dans cet exemple, greetMessage contient l’état actuel de l’atome, que nous ne pouvons lire, tandis qu’avec setGreetMessage, nous pouvons mettre à jour la valeur de notre état.

Exemple d’utilisation de useRecoilValue et useSetRecoilState

Comme vous pouvez le voir, les deux crochets suivants fournis par Recoil, useRecoilValue et useSetRecoilState, sont en quelque sorte des versions détruites de useRecoilState.

Avec useRecoilValue, nous recevons l’état actuel de notre atome, et nous l’assignons à la greetMessage variable. Il est probablement bon de mentionner ici que / est une variable en lecture seule, ce qui signifie que nous ne pouvons la remplacer d’aucune façon.
Pour ce faire, nous avons besoin du / Hook, à l’aide de laquelle nous pouvons écraser ou muter l’état.

Une note latérale rapide que je veux faire ici est que Recoil est vraiment strict quant aux façons dont nous pouvons muter l’état existant d’un atome. Cela ne peut se produire que de quelques manières clairement définies, dont une que vous avez déjà vue, avec l’aide de Recoil Hooks. Il y a une autre façon que je veux vous montrer un peu plus tard lorsque nous parlons de sélecteurs.

Par souci de clarté, je tiens à souligner qu’il y a quatre autres crochets de recul documentés sur la page officielle, mais comme je n’ai pas joué avec eux jusqu’à présent, je n’en ai inclus aucun dans les exemples. Veuillez vous référer au docs pour plus d’informations.

Il est temps de jeter un œil à la dernière pièce majeure du puzzle: les sélecteurs.

Close Menu