Partage avec Redux: Pourquoi Redux?

Lorsque vous apprenez à réagir, vous entendrez presque toujours les gens dire à quel point Redux est grand et que vous devriez essayer. L'écosystème React augmente à un rythme rapide, et il y a tellement de bibliothèques que vous pouvez vous connecter à React, comme le flux, les redux, les moyennes intermédiaires, le mobx, etc.

Apprendre la réaction est facile, mais s'habituer à l'ensemble de l'écosystème React prend du temps. Ce tutoriel est une introduction à l'un des composants intégraux de l'écosystème React - Redux.

Terminologie non redux de base

Voici quelques-unes des terminologies couramment utilisées que vous ne connaissez peut-être pas, mais elles ne sont pas spécifiques à Redux en soi. Vous pouvez parcourir cette section et revenir ici quand / si quelque chose n'a pas de sens.

Fonction pure

Une fonction pure n'est qu'une fonction normale avec deux contraintes supplémentaires qu'il doit satisfaire:

1. Compte tenu d'un ensemble d'entrées, la fonction doit toujours renvoyer la même sortie.
2. Il ne produit aucun effet secondaire.

Par exemple, voici une fonction pure qui renvoie la somme de deux nombres.

 / * Fonction d'ajout pure * /<br> const ud = (x, y) => {<br> retour xy;<br> }<br><br> console.log (add (2,3)) // 5<br><br>

Les fonctions pures donnent une sortie prévisible et sont déterministes. Une fonction devient impure lorsqu'elle effectue autre chose que de calculer sa valeur de retour.

Par exemple, la fonction ADD ci-dessous utilise un état global pour calculer sa sortie. De plus, la fonction enregistre également la valeur à la console, qui est considérée comme un effet secondaire.

 const y = 10;<br><br> const impureadd = (x) => {<br> console.log (`Les entrées sont $ {x} et $ {y}`);<br> retour xy;<br> }<br>

Effets secondaires observables

Les «effets secondaires observables» sont un terme sophistiqué pour les interactions faites par une fonction avec le monde extérieur. Si une fonction essaie d'écrire une valeur dans une variable qui existe en dehors de la fonction ou essaie d'appeler une méthode externe, vous pouvez appeler ces effets secondaires en toute sécurité.

Cependant, si une fonction pure appelle une autre fonction pure, la fonction peut être traitée comme pure. Voici quelques-uns des effets secondaires courants:

• faire des appels API
• Enregistrement à la console ou aux données d'impression
• Mutation de données
• Manipulation de Dom
• récupérer l'heure actuelle

Conteneur et composants de présentation

La division de l'architecture des composants en deux est utile tout en travaillant avec les applications React. Vous pouvez les classer largement en deux catégories: composants de conteneurs et composants de présentation. Ils sont également connus comme des composants intelligents et stupides.

Le composant conteneur s'intéresse à la façon dont les choses fonctionnent, tandis que les composants de présentation se préoccupent de l'apparence des choses. Pour mieux comprendre les concepts, j'ai couvert cela dans un autre tutoriel: conteneur vs composantes de présentation dans React.

Objets mutables vs immuables

Un objet mutable peut être défini comme suit:

Un objet mutable est un objet dont l'état peut être modifié après sa création.

L'immuabilité est exactement le contraire - un objet immuable est un objet dont l'état ne peut pas être modifié après sa création. En JavaScript, les chaînes et les nombres sont immuables, mais les objets et les tableaux ne le sont pas. L'exemple démontre mieux la différence.

 / * Les chaînes et les nombres sont immuables * /<br><br> Soit a = 10;<br><br> Soit b = a;<br><br> b = 3;<br><br> console.log (`a = $ {a} et b = $ {b}`); // a = 10 et b = 3<br><br> / * Mais les objets et les tableaux ne sont pas * /<br><br> / * Commençons par des objets * /<br><br> Laissez user = {<br> Nom: "Bob",<br> Âge: 22 ans,<br> Job: "Aucun"<br> }<br><br> active_user = utilisateur;<br><br> active_user.name = "Tim";<br><br> // Les deux objets ont la même valeur<br> console.log (active_user); // {"Name": "Tim", "Age": 22, "Job": "Aucun"}<br><br> console.log (utilisateur); // {"Name": "Tim", "Age": 22, "Job": "Aucun"}<br><br> / * Maintenant pour les tableaux * /<br><br> Laissez USERSID = [1,2,3,4,5]<br><br> Laissez USERSIDDUP = USERSID;<br><br> usersIddup.pop ();<br><br> Console.log (USERSIDDUP); // [1,2,3,4]<br> Console.log (USERSID); // [1,2,3,4]<br>

Pour rendre les objets immuables, utilisez le store.getState () - pour accéder à l'arbre d'état actuel de votre application.

Store.Subscribe (auditeur) - Pour écouter tout changement dans l'État. Il s'appellera chaque fois qu'une action sera envoyée.

Créons un magasin. Redux dispose d'une méthode configureStore pour créer un nouveau magasin. Vous devez le faire passer un réducteur, bien que nous ne sachions pas ce que c'est. Je vais donc créer une fonction appelée réducteur. Vous pouvez éventuellement spécifier un deuxième argument qui définit l'état initial du magasin.

src / index.js

 import {configurestore} à partir de "redux";<br> // c'est le réducteur<br> const reducer = () => {<br> / * Quelque chose va ici * /<br> }<br><br> // InitialState est facultatif.<br> // Pour cette démo, j'utilise un compteur, mais l'état est généralement un objet<br> const initialstate = 0<br> const Store = ConfigureStore (Reducer, InitialState);<br>

Maintenant, nous allons écouter tout changement dans le magasin, puis console.log() l'état actuel du magasin.

 store.subscribe (() => {<br> console.log ("State a changé" store.getState ());<br> })<br>

Alors, comment pouvons-nous mettre à jour le magasin? Redux a quelque chose appelé des actions qui réalisent cela.

Créateurs d'action / d'action

Les actions sont également des objets JavaScript simples qui envoient des informations de votre application au magasin. Si vous avez un compteur très simple avec un bouton d'incrément, l'appuyer sur cela entraînera une action déclenchée qui ressemble à ceci:

 {<br> Type: "Incrément",<br> charge utile: 1<br> }<br>

Ils sont la seule source d'informations au magasin. L'état du magasin ne change qu'en réponse à une action. Chaque action doit avoir une propriété de type qui décrit ce que l'objet Action a l'intention de faire. En dehors de cela, la structure de l'action dépend entièrement de vous. Cependant, gardez votre action petite car une action représente la quantité minimale d'informations nécessaires pour transformer l'état d'application.

Par exemple, dans l'exemple ci-dessus, la propriété Type est définie sur "Incrément" et une propriété de charge utile supplémentaire est incluse. Vous pouvez renommer la propriété de charge utile à quelque chose de plus significatif ou, dans notre cas, l'omettre entièrement. Vous pouvez envoyer une action au magasin comme celui-ci.

 store.dispatch ({type: "incrément", charge utile: 1});<br>

Lors du codage redux, vous n'utiliserez pas normalement des actions directement. Au lieu de cela, vous appellerez des fonctions qui renvoient des actions, et ces fonctions sont connues populaires sous le nom de créateurs d'action. Voici le créateur d'action pour l'action d'incrément dont nous avons discuté plus tôt.

 const incimpmentCount = (count) => {<br> retour {<br> Type: "Incrément",<br> Télé usuelle: compter<br> }<br> }<br>

Ainsi, pour mettre à jour l'état du comptoir, vous devrez expédier l'action incrementCount comme ceci:

 store.dispatch (incrément (1));<br> store.dispatch (incrément (1));<br> store.dispatch (incrément (1));<br>

Si vous vous dirigez vers la console du navigateur, vous verrez que cela fonctionne en partie. Nous ne sommes pas définis parce que nous n'avons pas encore défini le réducteur.

Alors maintenant, nous avons couvert des actions et le magasin. Cependant, nous avons besoin d'un mécanisme pour convertir les informations fournies par l'action et transformer l'état du magasin. Les réducteurs servent cet objectif.

Réducteurs

Une action décrit le problème et le réducteur est responsable de la résolution du problème. Dans l'exemple précédent, la méthode incrementCount a renvoyé une action qui a fourni des informations sur le type de changement que nous voulions apporter à l'État. Le réducteur utilise ces informations pour mettre à jour réellement l'état. Il y a un grand point mis en évidence dans les documents dont vous devriez toujours vous souvenir lors de l'utilisation de Redux:

Compte tenu des mêmes arguments, un réducteur doit calculer l'état suivant et le retourner. Pas de surprise. Aucun effet secondaire. Pas d'appels API. Pas de mutations. Juste un calcul.

Cela signifie qu'un réducteur devrait être une fonction pure. Compte tenu d'un ensemble d'entrées, il doit toujours renvoyer la même sortie. Au-delà de cela, cela ne devrait rien faire de plus. En outre, un réducteur n'est pas le lieu d'effets secondaires tels que passer des appels Ajax ou récupérer des données de l'API.

Remplissons le réducteur de notre comptoir.

 // c'est le réducteur<br><br> const reducer = (state = initialState, action) => {<br> switch (action.type) {<br> cas "incrément":<br> retour d'état Action.Payload<br> défaut:<br> état de retour<br> }<br> }<br>

Le réducteur accepte deux arguments - l'état et l'action - et il renvoie un nouvel état.

 (Précédent, action) => NewState<br>

L'état accepte une valeur par défaut, le initialState , qui ne sera utilisé que si la valeur de l'état n'est pas définie. Sinon, la valeur réelle de l'État sera conservée. Nous utilisons l'instruction Switch pour sélectionner la bonne action. Actualisez le navigateur et tout fonctionne comme prévu.

Ajoutons un cas pour DECREMENT , sans lequel le compteur est incomplet.

 // c'est le réducteur<br><br> const reducer = (state = initialState, action) => {<br> switch (action.type) {<br> cas "incrément":<br> retour d'état Action.Payload<br> cas "décrément":<br> Return State - Action.Payload<br> défaut:<br> état de retour<br> }<br> }<br>

Voici le créateur d'action.

 const de décretCount = (count) => {<br> retour {<br> Type: "décrément",<br> Télé usuelle: compter<br> }<br> }<br>

Enfin, envoyez-le au magasin.

 store.dispatch (incrément (4)); // 4<br> store.dispatch (décrémentCount (2)); // 2<br>

C'est ça!

Résumé

Ce tutoriel devait être un point de départ pour gérer l'état avec Redux. Nous avons couvert tout ce qui est essentiel nécessaire pour comprendre les concepts de base redux tels que le magasin, les actions et les réducteurs. Vers la fin du tutoriel, nous avons également créé un compteur de démonstration Redux fonctionnel. Bien que ce ne soit pas beaucoup, nous avons appris comment toutes les pièces du puzzle s'adaptent.

Au cours des deux dernières années, React a gagné en popularité. En fait, nous avons un certain nombre d'articles sur le marché qui sont disponibles à l'achat, à l'examen, à la mise en œuvre, etc. Si vous cherchez des ressources supplémentaires sur React, n'hésitez pas à les vérifier.

Dans le prochain tutoriel, nous utiliserons les choses que nous avons apprises ici pour créer une application React à l'aide de Redux. Restez à l'écoute jusque-là. Partagez vos pensées dans les commentaires.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!