PC & Mobile

Comment React Context peut venir à la rescousse si vous ne connaissez pas Redux

Comment React Context peut venir à la rescousse si vous ne connaissez pas Redux


Réagir Contexte

React est devenu un fuzzword en développement frontal au cours des dernières années. React devient de plus en plus fort avec le déploiement des nouvelles mises à jour. Cet article vous aidera à mieux comprendre le contexte de React, une bénédiction pour les développeurs aux prises avec des problèmes de gestion des données entre plusieurs composants.

Attendez, que fait REDUX?

Redux est une bibliothèque JavaScript open-source permettant de gérer l'état de l'application. Il est le plus souvent utilisé avec des bibliothèques telles que React ou Angular pour créer des interfaces utilisateur.

En bref, Redux aide à maintenir un état global accessible à l’ensemble de l’application.

Voici comment fonctionne typique redux:

Redux Workflow (Crédits image - Le nouveau Boston)

Whoa whoa, cela a dégénéré rapidement. Qu'est-ce qui vient juste de se passer? Il y a beaucoup de concepts à apprendre dans Redux comme Magasin, action, et Réducteurs. Mais il n'est pas nécessaire d'apprendre toutes ces choses. Vous pouvez faire la même chose avec React Context. Vous vous demandez comment?

Présentation du contexte de réaction

Quel est le contexte?

Le contexte fournit un moyen formidable de transmettre des données dans l'arborescence des composants sans avoir à transmettre manuellement les accessoires à tous les niveaux de votre application.

Jusqu'à React 15, vous ne pouviez utiliser que des accessoires pour transmettre les valeurs du parent au composant enfant. Mais il y a beaucoup de choses au-delà: que faites-vous lorsque vous devez transmettre des données entre pages (itinéraires différents) au sein de l'application?

Vous devez utiliser soit le stockage redux, soit le stockage local, en utilisant des cookies dans le navigateur. Le contexte résout tous ces problèmes. Le contexte fournit un moyen de partager de telles valeurs entre les composants sans avoir à transmettre explicitement un accessoire à tous les niveaux de l'arborescence de l'application.

Blocs principaux du contexte de réaction

Le contexte a 3 blocs principaux:

  1. Un objet de contexte
  2. Un fournisseur de contexte
  3. Un consommateur de contexte

Essayons de résoudre un scénario du monde réel avec le contexte. Supposons que nous voulions créer une application permettant d'ajouter des produits à un panier. Il existe deux pages (itinéraires): une qui affiche la liste des produits et l’autre qui affiche les articles de votre panier.

Si vous utilisiez seulement réagir sans redux, il deviendrait difficile de gérer l'état. Nous allons voir comment nous pouvons utiliser le contexte gérer l'état global.

Démo en direct

Le code source complet peut être trouvé ici.

Comme vous pouvez le voir dans l'exemple ci-dessus, il existe deux composants différents et les données doivent être partagées entre les deux composants - une sorte de données globale.

Objet de contexte

Vous pouvez définir l'objet Context dans un fichier séparé ou directement à côté d'un composant dans un fichier de composant si vous le souhaitez. Il est également possible d'avoir plusieurs contextes au sein du composant. Ainsi, vous pouvez stocker les données de votre choix dans l'objet de contexte auquel vous aurez accès de manière globale dans votre application.

J'ai ajouté des produits et un panier dans l'objet de contexte. Il est maintenant temps de fournir ce contexte à tous les composants de l’application devant accéder à ces données.

Fournisseur de contexte

Le fournisseur fournit les valeurs dans tous les composants de l'application qui doivent accéder à cet objet de contexte.

Fournir le contexte

Comme indiqué ci-dessus, voici comment le contexte est transmis. Cependant, vous pouvez rendre tous les composants de la

Quel que soit le composant enfant placé à l'intérieur du ShopContext sera en mesure d'accéder à l'objet de contexte.

Maintenant que nous avons fourni les valeurs, il est temps d’y accéder avec le consommateur.

Consommateur de contexte

Il est possible d’accéder aux données de deux manières:

  1. Utilisation de Context.Consumer
  2. Utilisation de contextType statique

Utilisation de Context.Consumer:

Contexte de consommation

Dans l'exemple ci-dessus, le le contexte n'est rien mais les valeurs de l'objet de contexte. Toutes les valeurs que nous avons définies lors de la création de l'objet de contexte sont facilement accessibles ici. Ouais, c’est aussi simple que ça!

Utilisation de contextType statique

C’est un moyen simple d’accéder au contexte avec contextType. En utilisant this.context vous pouvez accéder à l'intégralité de l'objet de contexte similaire à celui de context Consumer.

Jusqu'ici, l'exemple que nous avons vu concerne la transmission des données et leur accès. Voyons comment mettre à jour l’objet de contexte.

Mise à jour d'un objet de contexte

Mettre à jour l'état du contexte est assez facile, comme comment nous mettons à jour les valeurs dans l'état normalement. Nous devons passer une méthode du composant qui sera utilisée pour mettre à jour les valeurs dans cet état de contexte. Une fois les valeurs mises à jour via setState, les nouvelles valeurs seront automatiquement rendues dans tous les composants où l'objet de contexte est utilisé. Aucune science de fusée 🚀 ici!

Les deux méthodes ci-dessus montrent comment nous passons généralement une fonction du composant enfant au composant parent lorsque nous travaillons avec React.

Dans l'extrait de code ci-dessus, addProductToCart et removeProductFromCart sont les deux méthodes qui seront utilisées pour ajouter / mettre à jour des valeurs dans le contexte.

Vous êtes prêt à utiliser React Context Now!

Mais le contexte remplacera-t-il Redux?

  • Le contexte est une victoire évidente lorsque vous devez rarement mettre à jour les valeurs, telles que le stockage d'objets utilisateur lors de la connexion, les préférences de langue, les couleurs de thème, etc. (car ils ne déclenchent pas les mises à jour plus fréquemment).
  • Le contexte semble être simple comparé à redux, mais vous ne devriez pas l’utiliser lorsque les valeurs sont mises à jour plus fréquemment. Ce n'est pas optimisé pour ça.
  • L'ajout de Redux à votre projet apporte davantage de packages de dépendance, augmentant ainsi la taille de l'ensemble, tandis que le contexte peut être utilisé immédiatement avec React.

Ainsi, à partir de ce qui précède, le contexte peut certainement être utilisé pour les mises à jour à basse fréquence, mais il n'est pas recommandé pour la gestion générale des états.

J'espère que, dans les prochaines mises à jour, le contexte deviendra plus puissant et pourra être pleinement utilisé pour la gestion des états 💪.

Bonne apprentissage! 😄

Show More

SupportIvy

SupportIvy.com : Un lieu pour partager le savoir et mieux comprendre le monde. Meilleure plate-forme de support gratuit pour vous, Documentation &Tutoriels par les experts.

Related Articles

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Close
Close