Il y a toujours eu une myriade de façons de gérer l'état dans React. Redux a toujours été un choix populaire, mais avec React 16 et les bibliothèques récemment publiées, il existe désormais encore plus d'options. Quelles sont ces options et pourquoi utiliseriez-vous l'une d'entre elles plutôt qu'une autre ?

J'ai parcouru quelques choix populaires pour gérer l'état dans React et créé des applications de tâches très simples pour démontrer leur utilisation. J'ai essayé de garder les choses aussi simples que possible, afin que vous puissiez directement comparer ces exemples. La source est annotée avec des commentaires, alors jetez-y un coup d'œil et voyez ce qui correspond le mieux à votre cas d'utilisation !

setState() de React

L'état est discuté au début de nombreux tutoriels React différents pour une raison. Il fait partie de React et fait partie intégrante du fonctionnement du framework.

Ceci est appelé "état local" dans les documents de réaction, "état". Ici nous l'appellerons "setState()" pour se différencier des autres approches.

setState() est un moyen simple de gérer l'état de votre application et ne nécessite aucune bibliothèque au-delà de React.

Il y a quelques bonnes raisons d'utiliser setState() :

• Votre état n'est pas entièrement descriptible en tant qu'objets simples (vous pouvez stocker un état non sérialisable dans setState(), comme des nœuds DOM ou des objets avec des références circulaires)

• Vos modifications ne sont pas de pures fonctions et dépendent du "monde extérieur" (comme le navigateur) pour déterminer comment l'état doit changer

• Vous n'avez pas besoin d'une vue globale de l'interface utilisateur ; votre état ne sera jamais conservé ou stocké à distance.

✨Exemple

Une source annotée est disponible pour un exemple comparatif.

Redux

Redux est une alternative populaire à l'utilisation de setState() lorsque les contraintes ci-dessus ne sont plus vraies. Redux est un ensemble d'outils permettant d'écrire et de lire à partir d'un état global de manière fonctionnelle et cohérente. React redux fournit un moyen pratique de mapper votre état redux sur les composants React.

Redux asynchrone

Pour l'état asynchrone et distant, Redux thunk et Redux saga sont des choix populaires. Le thunk Redux utilise le middleware redux pour permettre aux actions d'être des fonctions asynchrones, et la saga redux utilise un modèle qui permet une gestion facile du comportement asynchrone et des effets secondaires.

Les observables Redux sont un moyen d'autoriser toute la puissance des observables dans votre gestion d'état, en connectant RxJS à redux via un middleware. rxmarbles fournit d'excellents exemples pour vous donner une idée de ce qui est possible ici.

Alors que Redux thunk et Redux saga facilitent la gestion de l'état asynchrone avec redux, mais peuvent devenir une chose de plus à apprendre pour les développeurs concernant la gestion de l'état.

⚠️ Redux est la norme de facto pour la gestion des états dans React, mais vous n'aurez peut-être pas besoin de Redux (par Dan Abramov, un co-auteur de redux !). Choisir quelque chose de plus compliqué que nécessaire vous ralentira et compliquera les changements d'état simples. Cela s'applique aux autres éléments de la liste - vous n'aurez peut-être besoin de rien d'autre que setState().

Les questions à poser sont bien expliquées car vous n'avez peut-être pas besoin de Redux, mais en résumé - Redux est bon si vous avez besoin d'un état sérialisable avec une manière avisée de gérer l'état global, mais peut être exagéré pour certains cas d'utilisation.

✨Exemple

État du lien Apollo

L'état de liaison Apollo est un moyen de combiner votre gestion d'état locale avec votre gestion d'état à distance. L'approche suppose que vous utilisez Apollo, ce qui vous permet d'utiliser GraphQL sur Rest. Cependant, vous n'avez pas besoin d'un serveur GraphQL pour utiliser cette approche ! – apollo-link-http vous permet d'écrire tout ce dont vous avez besoin pour adopter Apollo côté client. Cela signifie qu'il s'agit d'une solution tout-en-un viable pour la gestion de l'état (asynchrone et distant inclus), même si vous n'utilisez pas GraphQL.

La façon dont l'état local et l'état distant s'entremêlent passe par vos requêtes et vos mutations. apollo-link-state vous donne accès à un @client spécial directive qui indique à Apollo de rechercher cet élément d'état dans la mémoire locale, plutôt que sur un serveur distant.

query GetTodos {
  items @client {
    id
    text
    done
  }
}

La configuration d'Apollo uniquement pour la gestion de l'état peut être un peu fastidieuse, mais le résultat est un moyen naturel d'interroger et de faire muter l'état, en combinant la gestion de l'état local et à distance.

Pour les cas d'utilisation simples et les applications qui ne dépendent pas fortement de l'état asynchrone ou distant, l'état du lien Apollo est sûrement exagéré. Pour les cas d'utilisation plus complexes, Apollo peut vous aider en consolidant la gestion de l'état dans un seul système.

✨Exemple

Non déclaré

React 16 a apporté avec lui une nouvelle API de contexte, qui est un bon moyen de partager des informations autour de l'arborescence virtuelle de React. Unstated est une bibliothèque qui en tire le meilleur parti :c'est un moyen léger de gérer l'état global de votre application.

Il est conceptuellement similaire à Redux, mais avec moins d'opinions sur la façon dont vous devriez l'utiliser. L'état n'est pas découpé en différentes sections, et la définition des "actions" vous est laissée. L'API est très similaire à la forme setState() de React.

⚠️ Compte tenu de cela, si vous utilisez Unstated, vous devez à nouveau examiner attentivement si setState() est suffisant pour votre cas d'utilisation. À partir du fichier readme non déclaré :

Le fichier readme non déclaré donne de bons conseils sur l'utilisation d'alternatives telles qu'Apollo, les bibliothèques ou les modèles et collections Backbone.

À partir du fichier Lisez-moi :

Si vous recherchez un système de gestion d'état simple et sans opinion et que vous ne voulez pas les frais généraux des alternatives, cela vaut la peine d'être examiné.

✨Exemple

Mentions honorables

Ce n'est pas une liste exhaustive! J'ai inclus quelques références à des alternatives non mentionnées ici pour lesquelles je n'ai pas encore été en mesure de créer des exemples ou d'inclure ici.

• Stockroom vous permet de confier la gestion de votre magasin à un web worker ! Cela libère le thread principal du calcul et rend toutes vos demandes de lecture et de modification d'état asynchrones.

• Les modèles et collections de backbone constituent une alternative bien connue et peuvent être suffisantes pour votre cas d'utilisation.

• Alfa est une option de gestion d'état très petite et simple.

• MobX est un choix populaire (en espérant avoir l'occasion de l'essayer et de l'ajouter au blog !)

Résumé

React n'inclut pas ce type de gestion d'état lui-même, ce qui conduit à cette montée en puissance de systèmes de gestion d'état alternatifs. Il peut être difficile de faire ce choix, mais c'est bien d'avoir le choix - différents problèmes fonctionnent mieux avec différentes solutions, et c'est bien que React soit suffisamment flexible pour travailler avec chacun d'eux :)

👋 Salut ! Je suis Joshua Nelson. Je suis un développeur qui se soucie de rendre le Web meilleur, pour tout le monde ✨