Share
React est une bibliothèque JavaScript pour la création d'interfaces utilisateur qui a conquis le monde du développement Web. Cependant, dans une communauté qui favorise le choix et la flexibilité, il peut être difficile de savoir par où commencer!
Ne vous inquiétez pas, certains modèles et modules sont devenus des pratiques exemplaires. L'un d'entre eux est Redux pour la gestion de l'état de l'application.
Dans cette vidéo de mon cours sur Modern Web Apps avec React et Redux, je vais vous montrer comment utiliser le réagir-redux paquet.
Il est recommandé dans les applications Redux de faire la distinction entre les composants de présentation et les composants de conteneur. Dans cette vidéo, je vais expliquer ce que c'est et comment nous pouvons les utiliser.
Je ferai référence au code que nous avons déjà créé dans les parties précédentes du cours, mais vous devriez pouvoir suivre et voir ce que je fais. Vous pouvez trouver le code source complet du cours sur GitHub.
Accentsconagua
réagir-redux Paquetréagir-redux?Dans les parties précédentes de ce cours, nous avons créé un exemple d'application utilisant React et Redux. Cependant, presque tous nos composants doivent fonctionner avec le magasin, soit en lisant des états spécifiques, soit en renvoyant des actions au magasin. N'oubliez pas que le magasin Redux conserve tout l'état de votre application. Cela signifie que la plupart, sinon la totalité, de nos composants doivent pouvoir accéder au magasin d’une manière ou d’une autre..
Jusqu'à présent, nous avons un objet de magasin global auquel nous pouvons accéder directement dans la section où nous affectons des propriétés à notre barre latérale..
Cependant, avoir un magasin mondial comme celui-ci n'est pas bon pour beaucoup de raisons. Une des raisons les plus simples est qu’il n’est pas global, il n’est accessible que depuis ce fichier. Cela signifie que nous devrions l’utiliser à partir de ce fichier ou commencer à le transmettre de ce fichier à d’autres fichiers, qui deviendront très confus..
De plus, si nous avons beaucoup de composants imbriqués, cela signifie que si un composant intermédiaire n'a pas vraiment besoin du magasin mais de l'un de ses enfants, nous devons le passer à ce composant intermédiaire, car il en a besoin pour pouvoir le transmettre à son enfant.
Maintenant, il serait bien qu’il soit possible de donner à tous nos composants l’accès au magasin sans avoir de variable globale et sans la faire passer manuellement..
Et la vérité est, il y a un moyen. Nous pouvons utiliser un paquet appelé réagir-redux. Vous pouvez en apprendre un peu plus sur les idées derrière ce paquet si vous consultez la documentation Redux.
réagir-redux TravauxL'une des idées principales de ce package est celle des composants de présentation et des composants de conteneur. Fondamentalement, nous pouvons diviser notre application en deux ensembles de composants.
Le premier ensemble est constitué des composants de présentation. Celles-ci sont préoccupées par l'apparence Ils ne doivent pas du tout être au courant de Redux. Ils ne font que lire des données à partir de leurs propriétés et peuvent modifier des données en appelant des rappels que nous affectons également en tant que propriétés..
Les conteneurs, par contre, connaissent Redux et souscrivent spécifiquement à l'état Redux et envoient des actions Redux. Nous pouvons créer un composant conteneur en enveloppant simplement un composant de présentation avec certaines de ces instructions..
Voyons maintenant comment cela peut fonctionner. Nous allons utiliser la barre latérale comme exemple de composant que nous pouvons scinder en composants de présentation et conteneurs..
Maintenant, vous êtes peut-être un peu confus ici sur la façon dont nous allons diviser notre barre latérale en deux composants distincts. Mais la vérité est que les composants de conteneur vont toujours envelopper les composants de présentation. En fait, vous pouvez souvent avoir un composant de présentation qui n'a qu'un travail et qui doit être encapsulé par un composant de conteneur spécifique. C'est exactement ce que nous allons faire avec la barre latérale.
réagir-redux Bien sûr, nous devrons commencer par installer la bibliothèque react-redux. Alors faisons npm install --save react-redux.
Lorsque cela est installé, nous pouvons l'importer à l'aide de importer fournisseur de 'réagir-redux'; dans notre fichier principal, app.js. Dans ce fichier, nous n’avons besoin que du composant fournisseur qui nous a été fourni par react-redux.
Maintenant, le composant fournisseur est en réalité la partie de react-redux qui va prendre notre magasin et le transmettre à ces différents composants. En réalité, le fournisseur utilise en coulisse la fonctionnalité de contexte de React. Donc, si vous avez une expérience un peu plus avancée de React et que vous avez déjà joué avec le contexte, cela vous donnera peut-être une idée de la façon dont le fournisseur fonctionne..
Le fournisseur rend réellement très simple l’utilisation du magasin partout. Tout ce que nous avons à faire est d’envelopper notre composant d’application de niveau supérieur dans un composant fournisseur, comme indiqué ici:
Et maintenant, notre application utilise le fournisseur react-redux.
relier() Une fonctionMaintenant ouvrons notre fichier de la barre latérale et importons le relier() fonction de réagir-redux. le relier() function nous permet de définir exactement les propriétés et fonctions que nous souhaitons pour un composant conteneur, puis nous pouvons prendre cette définition, l'appliquer à un composant de présentation et obtenir un composant React complet.
Maintenant, je comprends que cela semble un peu déroutant. Voyons donc comment cela se fait.
La beauté de l'encadré que nous avons déjà écrit est que c'est en fait déjà un composant de présentation.
Tout d’abord, notre encadré ne se préoccupe vraiment que de l’apparence des choses. Cela nous donne un style de balisage, bien sûr, et ne connaît pas du tout Redux. Nous avons ces méthodes que nous appelons showAddDeck, addDeck, et hideAddDeck, mais ces méthodes connaissent Redux. La barre latérale ne sait rien du tout sur Redux. En fait, si nous voulions exclure Redux de ce projet et utiliser une alternative, nous pourrions simplement changer les définitions de ces fonctions, sans que ce composant de la barre latérale ne change du tout. Il appelle juste ces fonctions.
Comment lit-il les données? Eh bien, il ne lit que les données des propriétés que nous lui avons données. Que diriez-vous de changer les données? Eh bien, il appelle simplement des rappels provenant de propriétés. Nous avons trois méthodes, et quand il les appelle, les données sont modifiées dans le magasin. Et enfin, bien sûr, oui, c'est écrit à la main. Et comme vous le verrez dans une seconde, les composants du conteneur seront générés par react-redux.
Nous avons donc déjà l'un des deux éléments dont nous avons besoin: cette barre latérale est un composant de présentation. La prochaine chose que nous voulons faire est de prendre ces définitions de propriété que nous donnons dans la barre latérale. Au lieu de les définir ici, nous les définirons comme faisant partie de notre composant conteneur..
Donc, je vais simplement copier ces lignes:
Et je vais les coller en haut ici:
Maintenant, ces propriétés sont en fait bien divisées en deux ensembles: les propriétés qui sont des données et les propriétés qui sont des fonctions à appeler, qui effectuent des actions qui changent le magasin..
Nous devons donc maintenant créer deux fonctions qui mapperont l’état sur ces propriétés. Traditionnellement, dans React, ces fonctions sont appelées mapStateToProps et mapDispatchToProps.
Alors allons-y et commençons par mapStateToProps. C'est une fonction qui recevra l'état le plus récent du magasin..
Nous avons juste besoin de retourner un objet, qui va avoir deux propriétés et, comme nous l'avons déjà vu, ce sont les les ponts et ajouterDeck Propriétés. Je peux donc simplement les copier et les coller ici, car il s'agit pratiquement des mêmes données. Nous devons simplement convertir la syntaxe en syntaxe littérale d'objet plutôt qu'en syntaxe JSX..
C'est donc notre mapStateToProps une fonction. Fondamentalement, il prend simplement l'état actuel du magasin et renvoie les données ou le composant de présentation dont il a besoin. Donc, il faut le les ponts et le ajouterDeck propriété, et nous renvoyons donc ceux dans un objet.
Nous pouvons faire quelques choses pour nettoyer cela un peu. Tout d'abord, nous pourrions réellement supprimer ces accolades qui constituent le bloc de cette fonction, car nous ne renvoyons qu'une seule déclaration. Mais alors, comme nous n'avons qu'une seule ligne, nous pouvons nous débarrasser de la déclaration de retour.
Cependant, nous avons maintenant des accolades autour du littéral d'objet, et JavaScript va penser qu'il s'agit d'un bloc de fonction. Nous allons donc les envelopper entre parenthèses..
Nous pouvons raccourcir un peu le processus, car nous n’avons pas besoin de l’objet état entier. Nous pouvons donc utiliser la syntaxe de déstructuration et dire que nous voulons simplement les ponts la propriété et la ajouterDeck propriété de cet objet.
Bien sûr, dans cette fonction, on ne dit pas state.decks, nous disons juste les ponts. Et on ne dit pas state.addingDeck, nous disons juste ajouterDeck. Et maintenant, je pense que vous pouvez voir où nous allons avec ceci-parce que la clé et la propriété ont le même nom, nous pouvons nous débarrasser de l'un de ceux-ci et nous pouvons simplement dire les ponts et ajouterDeck.
Et ceci est la version courte de notre fonction grâce à ES6.
Alors maintenant qu'en est-il mapDispatchToProps? Eh bien, c'est une fonction aussi, et ça va prendre envoi comme seul paramètre. Maintenant, l'expédition, bien sûr, est la fonction d'expédition du magasin.
Encore une fois, nous allons simplement renvoyer un littéral d'objet, alors n'oubliez pas ces parenthèses, et à l'intérieur, nous avons besoin des trois propriétés que nous avons en haut: addDeck, showAddDeck, et hideAddDeck. Nous avons maintenant une fonction qui mappe la fonction de répartition aux trois rappels dont nous avons besoin pour une barre latérale..
Nous avons donc maintenant tout ce dont nous avons besoin pour créer notre composant conteneur. Nous avons deux fonctions qui mapperont notre objet d'état dans notre fonction d'expédition aux propriétés dont cette fonction a besoin. Et nous avons un composant de présentation qui attend ces propriétés.
Maintenant le relier() function est ce que nous pouvons utiliser pour connecter ces deux fonctions de mappage à un composant de présentation. Et ce que cette fonction de connexion va renvoyer est notre composant conteneur. Nous n'allons pas écrire un autre composant ici. Nous passons ces trois pièces à la place. relier() fonction, et il va retourner notre composant conteneur.
Donc en bas, au lieu d’exporter la barre latérale, exportons un appel vers relier(). Nous allons passer deux paramètres-la mapStateToProps et mapDispatchToProps fonctions et relier() retournera une nouvelle fonction.
exportez la connexion par défaut (mapStateToProps, mapDispatchToProps) (barre latérale);
Maintenant, ce qui est réellement exporté à partir de ce fichier n'est pas une barre latérale de présentation, mais bien notre nouveau composant conteneur, auquel nous pourrions encore parler en dehors de cette fonction.
Alors c'est ça réagir-redux paquet en action. Vous pouvez vérifier les fichiers sources du cours sur GitHub pour voir comment fonctionne le code..
Dans le cours complet, Applications Web modernes avec React et Redux, je vais vous montrer comment commencer à créer des applications Web modernes avec React et Redux..
Partant de rien, vous utiliserez ces deux bibliothèques pour créer une application Web complète. Vous commencerez par l'architecture la plus simple possible et vous construirez lentement l'application, caractéristique par caractéristique. Vous en apprendrez plus sur les concepts de base tels que l'outillage, les réducteurs et le routage. Vous découvrirez également des techniques plus avancées telles que les composants intelligents et stupides, les composants purs et les actions asynchrones. À la fin, vous aurez créé une application complète de cartes mémoire pour apprendre par répétition espacée..
En cours de route, vous aurez l'occasion de perfectionner vos compétences en ES6 (ECMAScript 2015) et d'apprendre les modèles et les modules qui fonctionnent le mieux avec React et Redux.!
Vous pouvez également développer vos connaissances de React avec ces cours:
