Début avec redux: Apprenez par l'exemple

Dans ce deuxième article de la série, nous allons renforcer notre compréhension de Redux et construire au-dessus de ce que nous savons déjà. Nous commencerons par créer une application Redux réaliste - une liste de contacts - c'est plus complexe qu'un compteur de base. Cela vous aidera à renforcer votre compréhension de la boutique unique et du concept de réducteurs multiples que j'ai introduit dans le tutoriel précédent. Ensuite, nous parlerons de la liaison de votre état Redux avec une application React et les meilleures pratiques que vous devriez considérer lors de la création d'un projet à partir de zéro.

Cependant, c'est bien si vous n'avez pas lu le premier post - vous devriez toujours pouvoir suivre tant que vous connaissez les bases de Redux. Le code du tutoriel est disponible dans le dépôt, et vous pouvez l'utiliser comme point de départ.

Création d'une liste de contacts à l'aide de Redux

Nous allons créer une liste de contacts de base avec les fonctionnalités suivantes:

• Afficher tous les contacts
• Rechercher des contacts
• Reprendre tous les contacts du serveur
• Ajouter un nouveau contact
• Poussez les nouvelles données de contact dans le serveur

Voici à quoi ressemblera notre application:

Couvrir tout dans un tronçon est difficile. Donc, dans cet article, nous allons nous concentrer uniquement sur la partie redux de l'ajout d'un nouveau contact et de l'affichage du contact nouvellement ajouté. Du point de vue redux, nous initialiserons l'état, la création du magasin, l'ajout de réducteurs et d'actions, etc.

Dans le prochain tutoriel, nous apprendrons à connecter les actions React et Redux et Redux et Redux à partir d'un frontal React. Dans la dernière partie, nous allons nous concentrer sur les appels API à l'aide de redux. Cela comprend la récupération des contacts du serveur et la demande de serveur tout en ajoutant de nouveaux contacts. En dehors de cela, nous créerons également une fonction de barre de recherche qui vous permet de rechercher tous les contacts existants.

Créez un croquis de l'arbre d'État

Vous pouvez télécharger l'application de démonstration React-Redux à partir de mon référentiel GitHub. Clone le repo et utilisez la branche V1 comme point de départ. La branche V1 est très similaire au modèle de création-réaction-app. La seule différence est que j'ai ajouté quelques répertoires vides pour organiser Redux. Voici la structure du répertoire.

 .<br> ├fiques-package.json<br> ├fiques<br> ├fiques<br> ├fiques<br> │ ├fiques<br> │ ├fiques<br> │ ├fiques<br> │ ├fiques<br> │ ├fiques index.js<br> │ ├fiques<br> │ └fiques<br> └til.<br>

Alternativement, vous pouvez créer un nouveau projet à partir de zéro. Quoi qu'il en soit, vous devrez avoir installé une buissier de base et Redux de base avant de pouvoir commencer.

C'est une bonne idée d'avoir d'abord une esquisse brut de l'arbre d'État. À mon avis, cela vous fera gagner beaucoup de temps à long terme. Voici un croquis approximatif de l'arbre d'État possible.

 const initialstate = {<br> Contacts: {<br> ContactList: [],<br> newContact: {<br> nom: '',<br> nom de famille: '',<br> e-mail: '',<br> adresse: '',<br> téléphone: ''<br> },<br> ui: {<br> // Tout l'état lié à l'interface utilisateur ici. par exemple: masquer / afficher les modaux,<br> // Bascule à cocher etc.<br> }<br> }<br> }<br><br>

Notre magasin doit avoir deux propriétés: des combineurs de combinaison qui vous permettent de créer plusieurs réducteurs, puis de les combiner en une seule fonction de réduction. La fonction des combinaisons améliore la lisibilité. Je vais donc diviser le réducteur en deux - un crochet UseState pour gérer l'état au niveau des composants dans votre application React.

Dans ce même esprit, Redux a introduit des crochets différents pour nous permettre d'effectuer les tâches habituelles (envoyant une action, obtenir un état, etc.) dans un composant fonctionnel tout en écrivant un code minimal. Ces crochets ont d'abord été ajoutés dans React Redux 7.1. Par exemple, pour expédier des actions et obtenir l'arbre d'état, Redux fournit les crochets suivants:

• usingElector: Obtenez l'arbre d'État ou même une branche de la statistique

Maintenant, avec ces crochets, nous pouvons plutôt refacter le code ci-dessus à cela:

 // d'autres importations ici<br><br> // importe les crochets redux<br> import {usageSispatch, usingElector} à partir de 'react-redux'<br><br> // Renvoie la fonction d'expédition de Hook<br> const Dispatch = usedispatch ()<br><br> // appelle getStore () pour créer un objet de magasin<br> const Store = getStore ();<br><br> // obtient un arbre d'état à l'aide de usage<br> const state = usingElector (state => state)<br><br> // obtient la branche d'interface utilisateur de l'État<br> const ui = us usingElector (state => state.ui)<br><br> / * renvoie isContactFormHidden renvoie false * /<br> Dispatch (toggleContactForm ());<br> / * renvoie isContactFormHidden renvoie false * /<br> Dispatch (toggleContactForm ());<br> / * met à jour l'état des contacts.NewContact Object * /<br> Dispatch (HandleInputchange («Email», «manjunath@example.com»))<br><br> dissubscribe ();<br>

Si tout fonctionne correctement, vous devriez le voir dans la console du développeur.

C'est ça! Dans la console du développeur, vous pouvez voir le magasin Redux en cours de connexion, afin que vous puissiez voir comment il change après chaque action.

Résumé

Nous avons créé une application Redux à nu pour notre application de liste de contacts impressionnante. Nous avons appris les réducteurs, diviser les réducteurs pour rendre notre structure d'application plus propre et rédiger des actions pour muter le magasin.

Vers la fin du post, nous nous sommes abonnés au magasin à l'aide de la méthode store.subscribe() . Techniquement, ce n'est pas la meilleure façon de faire avancer les choses si vous allez utiliser React avec Redux. Il existe des moyens plus optimisés de connecter la réaction frontale avec Redux. Nous les couvrirons dans le prochain tutoriel.

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!