Guide complet de la boîte à outils Redux avec React JS

1. Introduction: Bonjour et bienvenue dans ce cours dans lequel nous allons apprendre le concept Redux moderne. C'est la boîte à outils Rudolf avec religieux, m'appelle Rachel et je serai votre instructrice dans ce cours. Par conséquent, si vous êtes développeur React, vous pouvez utiliser la dérivée comme gestion de l'état pour que votre application React conserve l'état de l'application. Et vous pouvez également utiliser un intergiciel de langue expurgé ou de saga pour gérer les effets secondaires de votre application. Récemment, l'équipe de redact a mis au point la nouvelle approche pour écrire la logique de manière plus efficace lorsqu'elle lance une boîte à outils en lecture. Et avec cet outil, les choses deviennent beaucoup plus faciles. J'ai pensé à créer un nouveau cours sur ce sujet. Parce que cette bibliothèque de boîtes à outils YDa nous permet d'implémenter redox de manière beaucoup plus simple et concise, alors elle l'était auparavant. Maintenant, permettez-moi de vous donner un bref aperçu de Rudolf à ceux d'entre vous qui ne savent pas ce que c'est. Cet échec est la bibliothèque de gestion des états que nous utilisons dans notre application React, que vous allez utiliser dans votre application. Pas seulement avec React, mais il est très populaire. La bibliothèque React, c'est la vue d'ensemble du réduct. Comprenons donc ce que nous allons apprendre dans ce cours. Tout d'abord, nous commencerons par un concept théorique. Comme nous allons essayer de comprendre le problème principal de React et pourquoi nous utilisons Redux dans React. Ensuite, nous comprendrons ce qu'est une boîte à outils et ce que APA y compris a dit cette porte de péage expurgée, ce qui est créer un groupe de réflexion. Nous allons donc comprendre tous ces concepts à l'aide de la puberté. Après cela, nous commencerons à créer notre application à l' aide de l'outil de rédaction, créer et créer un groupe de réflexion dans lequel nous allons effectuer toutes les opérations de foule à l'aide de faux espaces réservés JSON EPA. Avec cette application, vous allez apprendre à faire ce post PUT et à le supprimer avec créer, je pense que le middleware dans votre application React redact Toolkit. Cette application que nous allons construire dans ce cours avec l'aide de réduct tollgate dans React. Parlons maintenant l'exigence de base pour ce cours. Ce cours est conçu de manière à ce que quiconque puisse rejoindre ce cours qui souhaite apprendre le concept redox moderne, vous suffit d'avoir une compréhension de base du HTML, CSS, du JavaScript, ainsi que Réagissez les connaissances de base. À la fin de ce cours, vous aurez une compréhension complète concept de boîte à outils réduct. Vous serez également en mesure d'implémenter la boîte à outils de rédaction dans n'importe quel projet React existant. Et vous pourrez également convertir ce projet React redux dans lequel l'ancien code Redux alors que la Grande-Bretagne pourrait en outil de lecture. Qu'attendez-vous pour participer à ce cours pour apprendre tous ces concepts modernes ? Et si vous avez des questions ou des suggestions, vous pouvez toujours me contacter. Je ferai de mon mieux pour résoudre toutes vos questions. Donc, c'est tout. De mon côté, je vous verrai dans la section des cours. 2. Qu'est-ce que Redux et pourquoi nous l'utilisons ?: Dans cette vidéo, nous allons d'abord comprendre le problème central de React c'est la gestion successorale. Nous avons notre composant principal de l'application. Ensuite, nous avons obtenu notre sous-composant. Si nous voulons modifier un texte, nous ne pouvons pas le faire directement. Au lieu de cela, je dois informer un parent et y modifier le texte. Et si j'ai un composant supplémentaire, il deviendra encore plus complexe. Par conséquent, nous avons une lecture qui a une approche différente. Nous avons donc ici notre point de vue, notre application et dans cette application dans n'importe quel composant donné sera expédié et action. Puis action marque à travers le réducteur. Réducteur plutôt simple tâche ou tâche. Il prendra une action, puis il prendra toutes les manipulations, et cela donnera un nouvel état. Cette manipulation va se produire, cuire sur l'immuable. Cela signifie qu'il ne modifiera pas l'ancien vecteur. Il prendra tout le circuit comme base, puis créera une toute nouvelle copie de tout ce qui est représenté avec les changements dans la ploïdie restés intacts. Nous venons de créer un nouvel élévation et de rendre ce nouvel état. Cet immuable vous donne un état unique dans votre application. Maintenant, nous obtenons un nouvel état peut être réduit , puis il sera stocké dans un magasin. Et nous n'aurons qu'un seul magasin dans notre application. Ce vecteur a une tâche simple pousser vers notre état. C'est pourquoi il s'appelle Restore. Vous avez peut-être un réducteur multiple, mais nous n'en aurons qu'un seul dans notre application. Ensuite, notre application s'abonne à cette boutique. Chaque fois qu'il est daté, mettez-vous à jour. Un nouveau parc national au magasin. Le magasin l' envoie automatiquement à tous les composants et le dirigera et l' application sera mise à jour. Revenons maintenant à l'exemple précédent où nous avions notre composant d'application avec d'autres composants. Et maintenant, nous avons également un magasin. Maintenant, si nous voulions modifier quelque chose, le composant utilisateur de MainComponent, nous allons procéder à l' envoi et à l'action. Ensuite, l'État l'a introduit. Et ensuite, nous sommes chers à tous les composants ces données sur ce qui est réduit et pourquoi nous utilisons Redux dans React js. 3. Qu'est-ce que la boîte à outils Redux ?: Comprenons maintenant quel est le total du lecteur de création à liquider utilisé également pour gérer l'application si 13 une application React de manière efficace. Il a fourni des batteries incluses dans ensemble d'outils pour un développement efficace. Ces batteries comprenaient un terme de jeu d'outils, un peu fantaisie ici, mais vous comprendrez ce terme plus tard. La racine x était donc déjà une option populaire pour la gestion de l'état dans notre application React. Alors pourquoi la boîte à outils expurgée est-elle nécessaire ? Avec la boîte à outils de redact, il y avait tellement de code nécessaire pour configurer pour optimiser ce niveau de base, et donc trop de code de plaque chauffante, ce qui rend notre code, nettoyons efficacement. De plus, trop de paquets doivent être installés pour créer une application évolutive. Avec le redox traditionnel, nous avions l'habitude d'écrire des actions et des réducteurs dans un fichier séparé. Et cela devient de plus en plus complexe lorsque notre application vous aide à relever ce défi, caviarder a fourni une boîte à outils de lecture. La trousse à outils Redact est une meilleure approche pour se débarrasser de la logique. Donc, dans l'ensemble, le lecteur doit bien paraître si la période de développement en incluant le paquet de trousse à outils de courbet expurgé qu'ils pensent être remplis pour construire une application de lecture. outils Redact permet aux développeurs d'écrire code Redux simple et propre. Il s'agit donc d'une boîte à outils Redact et de la raison pour laquelle nous l'utilisons avec React. J'espère donc que vous comprenez maintenant ce terme sophistiqué qui est un ensemble d'outils inclus dans la batterie. Il s'agit donc de boîte à outils. Maintenant, comprenons que ce lecteur a l'air bien avec un scénario de base. Supposons que nous devions créer une application de contact. Nous devons gérer qu'il y a encore cinq. Je vais vous montrer l'approche traditionnelle avec la réduction traditionnelle. Nous lisons donc généralement le réducteur et l'accident dans un fichier séparé. Comme vous pouvez le voir ici, nous avons x et dot js dans lesquels nous avons deux x dix pour incrémenter la valeur du compteur ou décrémenter la valeur du compteur et introduire un fichier dot js, nous avons une logique pour incrémenter un valeur de compteur ou décrémentez la valeur de compteur de la Thêta. Cariviration traditionnelle. Supposons maintenant que nous voyons comment nous approchons avec le lecteur pour avoir l'air bien. Dans l'outil de rédaction, nous pourrions réécrire notre réducteur et agir dans le même fichier. Vous pouvez constater que nous avons écrit notre action au réducteur sous la tranche Créer une tranche via l'approche Toolkit. Et vous pouvez rendre le code beaucoup plus concept en utilisant create. Le réducteur et moi pouvons écrire comme ça sous le live en voyant ce code, définir une grille avec lui et l' action devenir plus propre. Il a des données à regarder. Il n'est plus nécessaire d' utiliser l'instruction switch pour gérer l'action avec le producteur correspondant. Et une autre chose que vous avez peut-être remarquée ici, comme si nous avons maintenant directement muté la valeur dans la fonction réducteur au lieu de renvoyer une nouvelle valeur à mettre à jour. Cela s'est effectivement produit parce que l'outil de rédaction pouvait utiliser la bibliothèque qui permettait d'émeuter la mutation, logiquement, la réduction. Il s'agit de la boîte à outils du lecteur avec le scénario de base. 4. Comprendre l'API Redux-Toolkit: Parlons maintenant de ce gouvernail à lucratif. Cela inclut le maintien de cette API dans un paquet de boîte à outils radar. Commençons par le premier configuré pour configurer notre outil créatif afin de fournir une option de configuration simplifiée et une bonne valeur par défaut. Il peut combiner automatiquement votre réducteur de diapositives et vous pouvez fournir n'importe quel intergiciel, ce que vous voulez avec Redact. Cool, bien, débarras, merci inclus par défaut. Et il a également activé le lecteur utilisateur delta f fois. Et il n'est pas nécessaire d' écrire du code pour configurer la réduction dans l'outil de développement avec le package reduct Toolkit. Il vous suffit donc d'installer les outils Data Dev dans votre Chrome Roger, la table de réduction fonctionne automatiquement avec la table de réduction. Bon forfait. Il s'agit donc du magasin configuré. Parlons maintenant du disque de créer le réducteur. Fondamentalement, il simplifie l'écriture de notre logique de fonction réducteur car il utilise la bibliothèque IMRT en interne pour mettre à jour son état imité en écrivant un nouveau code dérivé dans votre réducteur et en prenant en charge mappage direct est une fonction anti-réducteur x spécifique qui mettra à jour l'état lorsque l'action sera dispersée. Fournissez une table de choix de type d'action pour créer la fonction réducteur plutôt que d'écrire une instruction de case de commutateur. Maintenant, passons à autre chose et parlons de l'action Créer. Créer une tension avec la fonction créatrice d'action écrite négligente fonction créatrice d'action écrite pour la balise donnée avec boisson. Et il peut également être utilisé dans un lieu de type constant. Maintenant, parlons de ça. Créer, sélectionner, créer une fonction Azure qui accepte un état initial et un objet d'un nom de fonction réducteur. Ensuite, il génère automatiquement un X et crée et agit et tapez qui correspondent au réducteur. Dans l'ensemble, cela crée des diapositives. Apa est l'approche standard pour écrire notre logique Redux. Maintenant, passons à autre chose et parlons de la créativité. Tournez-vous vers la création, je pense. Merci. Utilisé pour effectuer une tâche asynchrone avec le package réduct Toolkit. Cette fonction acceptait normalement trois paramètres. Le premier paramètre sera x et type, qui sera dans un anneau. Le deuxième paramètre sera la fonction qui renvoie un pouce généré par une promesse qui dispersera soit la ceinture de type action en attente, exécutée ou rejetée sur cette promesse. Et le troisième paramètre sera l'objet Option. Parlons maintenant de cet adaptateur Créer une entité, générer un ensemble de réducteurs réutilisables et sélectionné pour gérer les données normalisées dans la restauration. Il s'agit de la boîte à outils de réduction, d'un BA, et nous en comprendrons plus sur cette API, comme créer une diapositive, créer un think tank, configurer une visite en détail. Cinquièmement, commencez à créer notre application dans la section suivante. 5. Comprendre la création de createAsyncThunk: Comprenons maintenant cette pensée créative. intuitif. Chaque fois que nous devons effectuer une tâche, nous utilisons des intergiciels. Le middleware peut être n'importe quoi. Il peut s'agir d'une saga réductrice ou expurgée d' effectuer des tâches asynchrones et de déduire les intergiciels, soit un package populaire avec le lecteur avec boîte à outils expurgé, réductant est inclus par défaut, permettant aux créateurs d'effectuer une logique asynchrone avant d'envoyer le résultat du processus au réducteur. Nous avons ici notre exemple de code et je vais vous donner un bref aperçu de cet exemple de code. Maintenant, je vais d'abord parler de cette création de diapositives. Donc légèrement la fonction qui contient votre code et la fonction réducteur utilisée pour modifier les données d'un magasin. Donc, dans l'ensemble, en troisième lieu, il crée une API en direct. Nous écrivons notre logique de lecture. Vous pouvez donc voir ici que nous avons une propriété de nom, donc ce n'est rien d'autre que vos chiffres à la vitesse de l'éclair. Nous devons maintenant fournir une diapositive à l'intérieur de ce qui crée des esclaves. Ensuite, nous devons fournir l'état initial. Ici, nous définissons l'état initial de notre application. Vous pouvez donc voir ici que nous avons initialement des entités semblables à des états et que nous chargeons false. Nous avons maintenant un objet réducteur ici. À l'intérieur de cet objet. Nous avons traité les demandes synchrone pouvant mener au magasin. Maintenant, nous avons des activités très réduites. Nous gérons l'asynchrone, qui est notre Min. Ok, donc je pense que Ronnie a créé avec la création, je pense à dix étapes trois paramètres. Le premier paramètre sera le X et le type de boisson, et le second sera une fonction qui renvoie une promesse et génère une langue qui expédie dépenser le pilier complet type d'action rejeté basé sur la base sur cette promesse. Et le troisième sera l'objet Option. Individuellement avec l'Italie, nous avons fourni configuration différente et différente pour créer une API think-tank. Mais le troisième paramètre, l'oxygène de l'agent ici. Chaque fois que cette action est effectuée, une bonne expédition à partir d'un composant de notre application. Ainsi, créer n'importe quoi peut générer un cycle de vie à trois promesses en utilisant le même type de chaîne qu'un préfixe. Vous pouvez donc voir ici qu' il ne génère pas une attente exécutée, déjectée. Et tout ce cycle est disponible dans notre réducteur supplémentaire. Ainsi, tous les trois prometteurs du cycle de vie généré par création de dix vont évaluer en fait notre réducteur. Donc généralement, ce qui se passe lors de l'appel initial, créer un groupe de réflexion enverra ce type d'action, accord, et cela est en attente. Ensuite, nous aurons créé notre charge utile, qui s'exécutera pour renvoyer un résultat ou une erreur. En cas d'erreur, créez, je pense que nous enverrons une action avec le caviardé. Si notre jeu de données réussit , la création de dix permettra disperser ce type d'action exécuté. Et les trois paramètres du cycle de vie, nous évaluerons à l'intérieur de cette réduction supplémentaire notre objet où nous apportons modifications souhaitées au magasin. Il s'agit d' une chose créative. 6. Configuration du projet: Dans ce projet, nous allons utiliser la fausse API JSON pour créer notre application de crédit à l'aide de réduct toolkit et créer n'importe quoi. Nous allons donc utiliser cette API, comme obtenir la publication en fonction de l'ID. Nous allons utiliser cette API pour publier un seul article de blog. Et nous allons également utiliser cette fausse API. Mettez à jour un seul port et en fonction de l'ID et en noir, nous allons utiliser DCPA pour supprimer un seul port basé sur l'ID. Donc, dans l'ensemble, nous allons utiliser pour un PI avec boîte à outils réduct dans ce projet. Commençons par mettre en place notre projet. Je suis dans ce répertoire et je vais ouvrir une invite de commande. Je vais créer un projet React. Qu'il réagisse. Apa. Vous pouvez donner n'importe quel nom, ce que vous voulez. Créons ce projet. Il faudra donc environ deux à trois minutes pour installer toute la dépendance NO3. Et je reviendrai avec tous les processus. Bien terminé, guide la configuration de notre projet maintenant terminée. Mais allons d'abord dans ce répertoire qui est correct. Boîte à outils Apa. Donc, avant de démarrer npm, je voulais installer quelques paquets pour ce projet. Je vais donc installer des paquets comme ça. Nous allons donc utiliser et concevoir pour construire notre composant. Ensuite, nous devons installer une boîte à outils réductrice. Dernière boîte à outils. Et nous avons également besoin d'un routeur React. Seulement trois paquets. Est-ce nécessaire pour ce projet ? Nous allons donc installer tous ces paquets. Pendant ce temps, je vais ouvrir ce projet en code Visual Studio. Donc, les gars, on dirait que tous les paquets sont installés et j' ai déjà ouvert ce projet dans mon code Visual Studio. Allons donc dans le code VS. Comme vous pouvez le constater, ce projet est ouvert dans mon code VS. Et ici, nous avons emballé la diapositive. Ici, nous avons un package comme et redessinons l' outil redact, kirtan, React routeur down, Guys, afin d'utiliser et de composants à la demande dans notre projet React. abord, nous devons apporter le fichier CSS fourmi et design afin d'utiliser le composant de conception Android dans ce réacteur. Donc je vais juste apporter les antidépresseurs, fichier CSS. Un fichier CSS que nous devons apporter de nos anticorps et nous seuls pourrons utiliser le composant antidépresseur. 7. Structurer notre application: Nous allons maintenant structurer notre projet. Je vais juste créer quelques dossiers ici, comme si nous allions se dérouler comme un utilisateur poster un dossier un peu hétérodoxe. Tout d'abord, disons avoir digéré une voie. Je vais l'avoir et c'est le fichier Dot JS. Créez un fichier post dot js. Nous allons avoir un fichier de plus chargé garde dot js fichier. Afin de montrer le chargeur squelettique. Nous avons créé ce fichier. Nous allons maintenant générer un extrait de code. D'abord. Nous avons cette création post ce fichier index.js. Nous allons nous adapter à la pose. Nous pouvons mettre à jour le poète et supprimer le post. Toutes ces choses que nous allons faire dans ce fichier index.js. Générez-le en un peu. Donnons ici seulement le fichier habit JS. Supprimons ce logo que nous n'allons pas utiliser. Enlevons toute cette partie. Nous allons apporter des itinéraires et des itinéraires de commutation de routeur React. Du routeur React vers le bas. Nous allons apporter des itinéraires. Nous avons besoin d'un routeur de navigateur de route. Fondamentalement, nous allons enregistrer cela pour l'itinéraire. C'est créer un fichier js point index, ok ? Ce ne sera pas le fichier index.js. Donnons comme à la maison seulement ingérer ici, des itinéraires. Nous utilisons ici React Rotterdam vergence six. Vous pouvez le voir. C'est pourquoi j'utilise pas tellement les itinéraires ici. J'espère que vous êtes au courant de ces changements en ce qui concerne la dernière version du routeur React ici n'est pas non plus nécessaire. Nous pouvons donc simplement garder l'état du chemin du composant. Nous allons utiliser l' élément pour la première fois, rejeter à l'heure du trajet à domicile. Le prochain itinéraire. Nous allons avoir comme créer, créer. Les deux. Quel que soit le poème que vous allez créer, il ne sera pas enregistré dans un serveur adjacent car l'éthyle est un serveur fixe. Donc ici, nous ne faisons que imiter toutes les demandes comme obtenir, mettre, poster et supprimer. Vous n'avez pas pu enregistrer de données. En dB. Nous avons rejeté dish to route et laissez-nous aussi faire comme le routeur de navigateur. Siropons tout ce routeur de navigateur d' applications. Retirons celui-ci. Commençons par démarrer sur site. Commençons. Attendons maintenant le chargement de l'application dans le navigateur. Donc, la réplication est chargée dans le navigateur. Nous allons visiter cette route. Bush aussi, que ça marche ou non. Il s'agit également d'un registre. Nous avons enregistré avec succès nos deux itinéraires. 8. Travailler sur le formulaire: Maintenant, je vais commencer par récupérer la Porsche en fonction de l'ID cinq fois, en créant un champ de saisie et le bouton, deux boutons. Je vais commencer à travailler à partir de ce dossier. Mais nous devons le faire maintenant pour apporter un élément de notre conception. Apportons ces composants en premier. Le composant que nous allons apporter un bouton, une carte, un espace d'entrée. Réagissez lorsque l'informatique apporte des données aux utilisateurs et utilise l'effet. Puisque nous devons terminer l'ID du port. Nous devons donc définir un état avec ID. ID. ID. Laissez-nous vous donner un peu comme vous venez de revenir. Nous devons définir une classe, un conteneur de largeur. Et après cela, nous allons avoir un cap. Donc, fondamentalement, nous effectuons le style de titre de script de phage post , style en ligne. Maintenant, après ce titre, nous allons avoir un champ de saisie avec un espace réservé, comme l'ID utilisateur. Avec le serveur JSON. Fondamentalement, nous allons passer n'importe quel identifiant aléatoire et nous obtiendrons un post comme le titre et type de corps sera le type de corps sera le numéro sur le changement que nous allons donner. On peut juste faire comme un set. Il aura dans l'événement une valeur de point cible. Maintenant, nous devons également passer la valeur. Nous avons donc une pièce d'identité. Nous pouvons donner quelques mosaïques vers ce champ de saisie, largeur, désolé, 300 pixels. Maintenant, nous pouvons respirer quelques respirations ici. Gardons les respirations. Nous allons maintenant avoir un espace, un composant spatial que nous allons utiliser. Parce que, parce que nous allons combiner deux boutons, gardons les côtés. Il sera petit. Donnons un style de doublure. Je vais juste donner une marge globale. Ajoutez-y. Nous allons avoir notre bouton, notre bouton Design. Ce bouton sera principal. Nous pouvons donner le bouton Lamelech, que vous pourrez alors, une fois que l'utilisateur aura donné l' ID dans le champ de saisie, il sera en mesure de remplir ce message. Après cela, ce que nous devons faire, nous allons avoir un bouton de plus. Ce bouton est essentiellement responsable de la création d'un utilisateur. Ce bouton vous permet essentiellement d' accéder à la création que nous avons créée ici. Nous avons deux boutons et nous allons avoir une méthode onclick. Nous pouvons vous donner un pinson, utiliser leurs poteaux. Définissons cet énorme port AT. Sinon, nous obtiendrons une erreur. Nous avons défini cette fonction. Cette fonction que nous allons envoyer, d'accord ? Et de l'action. Nous avons défini cette fonction dans laquelle nous, dans laquelle nous allons envoyer et agir. Allons donc d'abord dans le navigateur. Nous avons ce champ de saisie et nous devons également activer la fonctionnalité de navigation sur ce bouton. Donc, ce que nous pouvons faire à partir du réacteur vers le bas, nous pouvons en amener l' utilisation et naviguer. Nous devons donc amener les États-Unis à naviguer. Nous devons maintenant conserver la référence. Vous utilisez la variable Naviguer dans et naviguer. Naviguez. Ce que nous pouvons faire ici. En cliquant sur. Nous pouvons simplement naviguer pour créer des publications. Voyons les détails que nous avons déjà enregistrés. Oui, c'est la même voie que celle que nous avons mentionnée ici. Allons dans le navigateur. Rafraîchir Cliquez sur Créer des publications futures. Nous sommes donc maintenant en mesure de naviguer vers la création d'un post. Tapez quelque chose ici. Il n'acceptera que le numéro. Nous sommes également en mesure de taper celui-ci. Maintenant, la prochaine chose que nous allons mettre en place la boîte à outils expurgé dans notre projet. 9. Configuration et écriture GET Action avec createAsyncThunk: Ici, nous avons déjà créé le dossier. Ici, nous devons créer un autre dossier comme des fonctionnalités. Puisque nous avons affaire au poète maintenant, nous allons vous donner la vie comme les deux diapositives, pas dans la racine du dossier réduct. Nous allons avoir notre fichier de restauration dot js. Assurez-vous qu'il ne devrait pas être dans le routeur. Je pense donc qu'il a plutôt été créé dans le futur. Supprimons donc celui-ci et assurez-vous que le fichier doit être à l'intérieur cette réduction car c' est le fichier store dot js. Stockez le fichier dot js. Maintenant que nous avons dans notre dossier, nous allons d' abord écrire une réaction redox avec réduct toolkit pour remplir la publication en fonction l'ID en utilisant créer un think tank. Dans les poteaux tranchent avec l' Italie glisse avec rien d'autre qu'une collection de logique réduite. Dans des diapositives avec l'Italie, nous mettons à jour l'état de notre composant avec l'aide du producteur. Nous devons donc apporter de la boîte à outils, créer une tranche et créer une tranche asynchrone, créer une tranche, créer n'importe quoi. Après cela, ce que nous avons à voir avec la création d'un groupe de réflexion, nous allons faire une demande d'API. Comme vous le savez déjà lu, un Tango est inclus par défaut dans la boîte à outils de rédaction. Aligner créer un think-tank pour effectuer un retard avec créer un think tank, nous allons faire une demande d'API. Dans l'ensemble, la création d'un groupe de réflexion est utilisée pour la logique asynchrone avant d'envoyer le résultat du processus au réducteur. Créons donc notre première action créant des coûts d'exportation. Poste. Après cela, créez un groupe de réflexion. Dans le premier paramètre nous allons passer notre type d'action. Vous pouvez passer de cette façon, poster et GET post. Le deuxième paramètre est la fonction de rappel, qui est chargée de rendre l'API requise. Et la troisième est facultative. Ce sera l'objet Container Option. Nous allons donc écrire notre logique asynchrone. Nous allons recevoir une pièce d'identité de nos composants afin de distraire cette idée. Après cela, nous pouvons effectuer un retour et nous allons utiliser le poisson pour faire une demande d'API. Nous allons d'abord utiliser cette API. Nous allons obtenir le port en fonction de l'ID. Nous pouvons simplement copier celui-ci. Nous pouvons l'adapter ici. Nous allons utiliser la coche arrière parce que nous allons avoir la date sur la carte d'identité. Nous avons ici une carte d'identité pour deux parties. Ensuite, nous allons donner une réponse. Cette réponse a donné JSON. Maintenant, créez un groupe de réflexion, essentiellement ce qu'il fait. Donc, chaque fois que nous expédions cette action qui est un coulage concret de notre composant. Cela crée un cycle de vie prometteur régénératif. Le cycle de vie des promesses en attente, rempli et rejeté. Et nous allons évaluer cycle de vie de ces trois promesses après réducteur, où nous pourrons apporter les modifications souhaitées au niveau distal. Commençons par créer une tranche. Sport. Coûts. Slice est appelé pour créer des diapositives. Nous allons définir le nom de la tranche. Donnons donc votre poste. D'accord. Nous allons connaître l'état initial de notre application. Je vais donc définir le post avec empathie. Ensuite, nous allons avoir le chargement faux. erreur sera alors nulle. D'accord ? Pour l'instant, cet état initial est requis pour notre application. Maintenant, nous allons avoir notre réducteur supplémentaire, que nous allons gérer le cycle de vie des trois promesses généré par notre réducteur de think tank. Et à l'intérieur de cela, nous allons avoir un bon post point en attente, puis rempli et cela a agi. Ensuite, nous allons avoir une action de l'État. Ici. Nous allons avoir le chargement par points d' état sera vrai en cas de flexion, chargement sera vrai. De même, nous allons maintenant avoir accompli le cycle de vie. Donc, GET post dot rempli. L'action de l'État. Ici, nous pouvons simplement faire comme mettre ligne la loi de l'État sur false. Maintenant, nous avons obtenu les données et nous devons rendre le chargement faux état. Ok, maintenant state.org. Nous devons donc maintenant mettre à jour l'état initial des deux tangibles afin de pouvoir simplement écrire comme une charge utile de points d'action. Après cela, nous allons faire en sorte qu'il soit affiché. Élu. L'action de l'État. Dans ce cas également, chargement sera l'impulsion. Après cela, qu'avons-nous une erreur totale de point d'état ? Ici, nous pouvons donner comme une charge utile de point d'action. Ici. Doit-on utiliser un point-virgule ? Point-virgule. N'oubliez pas d'utiliser un point-virgule. Mettons en forme celle-ci. Maintenant, nous devons réellement exporter celui-ci, exporter par défaut, post-diapositives réducteur de points. Nous avons donc rédigé notre première action. Il est maintenant temps d'écrire la logique dans notre fichier store dot js avec la boîte à outils du lecteur. Configuration de victorieux. Très simple. Nous devons donc apporter configurer un magasin à partir de notre boîte à outils expurgée. De la rédaction, tout à fait bon d'apporter la configuration si torr. Maintenant, nous devons apporter nos réducteurs, réducteurs. Notre futur dossier. Il s'agit de quatre diapositives. Exporter, par défaut, a configuré un magasin. Ici, nous allons avoir une application réducteur. Nous allons fournir la clé de ce réducteur de portrait. À l'aide de cette clé d'application, nous allons accepter l' état que nous avons défini dans notre tranche afin d'accéder à cette erreur dans notre composant. C'est pourquoi j'ai défini cette clé d'application. Nous en avons fini avec la configuration du magasin. Passons maintenant au fichier index.js et cinq minutes pour apporter un paquet comme un index réacté parce que, parce que nous allons avoir besoin de fournir pour que je puisse faire glisser cette porte vers notre React application, haute React Redux. Et j'ai oublié d'installer ce paquet au départ. Installons les paquets est long. Fermons ce terminal. abord, épinglez-le pour l'épingler pour amener le fournisseur de nos produits de réacteur que notre composant peut après l'état que nous avons défini dans notre restauré. Et nous devons apporter sa visite depuis notre dossier redox. Ok, maintenant, nous allons envelopper notre composant d'application avec le fournisseur. Coupons celui-ci, collons-le ici. Nous pouvons utiliser Datastore et stocker. Vous pouvez également vérifier celle-ci si vous avez correctement intégré la boîte à outils Redact à l'application React ou non. Vous pouvez accéder au navigateur et vous pouvez simplement ouvrir cet outil. Je vais ajouter à mon bouton. Et ici, vous pouvez voir l'état. Cela signifie que nous avons configuré avec succès notre boîte à outils dans un projet React. 10. Dispatch GET CREateAsyncThunk Action: Maintenant, nous devons essentiellement expédier cette action que nous avons créée dans nos diapositives de publication à partir de notre composant. Bon, passons au fichier index.js. Et à partir de là, nous devons apporter une énorme expédition et vous avez choisi que vous devez respecter est utilisé pour envoyer une action. Vous avez sélectionné pour sélectionner l'état dans notre boutique. Tout d'abord, stockons la référence à l'utilisation de la variable d' expédition, de répartition. Ensuite, nous sommes seuls à pouvoir envoyer une action. Ici. Nous allons d'abord vérifier si vous n'avez pas de pièce d'identité. Nous avons acheté une méthode d'erreur simple comme l'alerte de point de fenêtre. Nous pouvons simplement me donner comme s'il vous plaît fournir une pièce d'identité que nous allons disperser et agir que nous avons créée dans notre post. code Post et VS importent automatiquement cette action. Et nous pouvons passer ici, j'ai aimé cela parce que vous pouvez voir cette carte d'identité que nous recevons ici sous forme d'objet. Nous pouvons donc passer la pièce d'identité de cette façon. Après cela, nous pouvons simplement faire une autre chose comme définir l'ID pour divertir. Tout d'abord, vérifions si nous sommes en train d'être piqués ou non sur la base d'une identification aléatoire. Laissez-moi d'abord rafraîchir ce 1. Et donnons une pièce d'identité. Cliquons sur Fetch Forth. Voyons maintenant la profondeur baisser. Vous pouvez voir que cette promesse s'est concrétisée ici. D'accord ? Ici, nous avons 1 quatrième en tableau d'objets. Maintenant, vous pouvez voir que nous avons reçu ce post, d'accord ? Maintenant, nous devons afficher ce port dans notre interface utilisateur. Faisons donc celui-là. Nous devons donc maintenant extraire l'état de notre magasin en utilisant les États-Unis sélectionnés. Vous pouvez utiliser votre sélecteur d'utilisation. Nous pouvons faire en sorte que votre plus léger ait été fait. Nous pouvons étaler l'application State Dot car notre réducteur est restauré avec la clé de l'application. Ainsi, à l'aide de la clé d'application, nous pouvons accéder à l'état que nous avons dans notre vecteur. Nous avons défini un état comme le chargement. D'accord ? Publiez ces états que nous avons définis dans notre réducteur dans les diapositives. abord, consoles consignent le postdoc, que nous obtenions la publication ou non, la publication du journal de la console. Allons dans le navigateur. Donnons n'importe quel ID utilisateur aléatoire. Maintenant, ouvrons la console. Vous pouvez voir que nous avons un domaine. Il contiendra toujours un tableau d' objets unique car nous récupérons la publication en fonction de l'ID. Nous allons maintenant afficher ce détail de publication dans un composant de carte. Donc, d'abord, je vais mettre du code ici dans la courbe de chargement. Ok, donc nous montrons essentiellement un chargeur de personnages. Le chargement est vrai. Une fois le chargement tombé , nous allons afficher ces données dans un composant de carte. Et je vais payer le code ici pour le chargeur squelettique. Et ne vous inquiétez pas, je vais joindre ce code dans cette conférence. Vous pouvez facilement trouver code pour cette courbe flottante. Maintenant, ce que nous devons faire, nous avons l'état de chargement. Après cette page, je vais vous donner quelques brèves. Ensuite, nous pourrons avoir notre état de chargement. Et si le chargement est vrai, alors dans ce cas, je vais montrer la carte de chargement du chargeur de personnages. Les Cvs mettent automatiquement l'importation de ce composant. Nous pouvons fournir le décompte à un seul. Et dans cette partie, nous allons afficher détails du port dans un composant de carte. Ici, je vais utiliser un fragment. Et nous allons utiliser un nom de classe, c'est-à-dire le nom classe de conception, carte, l'enveloppe de trait de bordure. Et après cela, ce que nous devons faire, je vais utiliser la carte ici. Car, saisissez un titre. Nous pouvons trier un titre de cette façon. Il contiendra toujours un tableau unique d'objets. Nous pouvons donc afficher comme ceci pour le titre des points. De cette façon, nous pouvons le montrer. Nous pouvons enseigner un meilleur ID utilisateur en tant qu'identifiant d'utilisateur réel. ID utilisateur et ID post-point. Bon, voyons d'abord celle-ci si nous sommes capables de voir quelque chose ou non. Allons dans le navigateur. Et maintenant, vous pouvez voir que nous sommes en mesure de voir cet identifiant. Recadrez celui-ci. Nous obtenons une erreur. Impossible de lire la propriété du titre. Bon, pas de problème. Donc, pour résoudre ce problème, ce que nous pouvons faire, nous pouvons simplement vérifier ici comme la longueur des points. Longueur des points. Cette valeur est supérieure à 0. Ensuite, seuls nous allons afficher ce composant de carte. Découpons celui-là. Ici. Allons dans le navigateur, rafraîchissons celui-ci. Donnons maintenant un ID utilisateur aléatoire. Maintenant, vous pouvez voir que nous avons reçu notre post ici. Il s'agit du titre et il s'agit de l'ID. Maintenant, nous devons également montrer le corps. Vous pouvez donc voir qu'il a un titre que nous affichons déjà ici et que nous devons également afficher le corps et ce composant de carte. Donc, ce que nous pouvons faire, pour que vous puissiez avoir une seule étiquette de span ici. Étiquette Span ici. Nous pouvons nous vanter d'un corps de 0 point parce que nous sommes confrontés à un seul poste basé sur l'idée. Il y aura donc toujours une seule zone hors objet. J'espère que vous avez compris ce point. Allons maintenant dans le navigateur. Maintenant, vous pouvez voir que nous sommes également capables d'afficher le corps. Pour ce post. Nous sommes en mesure d'afficher celui-ci. Nous sommes en mesure d'afficher le titre et le corps. Et nous allons encore frapper en fonction de n'importe quelle pièce d'identité. Nous avons également collecté le chargeur. 11. Ajouter des boutons: Nous devons maintenant ajouter deux boutons que vous faites. Appuyez sur, Supprimer. Ajoutons également ce bouton. Après cette carte, nous allons sur ce bouton. Je vais donc utiliser votre espace. Nous pouvons fournir des accessoires comme le milieu. Je vais avoir un style en ligne. Margin top, je vais vous donner une marge, un top 35, une marge restante. C'est cinq. Et je vais donner un flotteur, flotteur, un flotteur juste. Maintenant. Entre l'espace, nous allons avoir notre bouton. Bouton. Encore une fois, nous allons utiliser et concevoir un composant. Nous pouvons avoir votre carrelage d'alignement. Nous devons spécifier un pointeur. Nous allons avoir du type, du type. Je vais vous donner une primaire. Nous allons avoir Danger. Nous aurons aussi la méthode OnClick jusqu'à présent Judge, définissez le bouton valeur hors afin qu'il ait une suppression. La même chose que je vais juste copier pour un rendez-vous aussi. Ce ne sera qu'une date. Nous pouvons supprimer cette partie de danger. Voyons si nous sommes en mesure de voir nos boutons ou non. Vous pouvez voir que nous avons nos boutons. Passons à nouveau la page. Nous avons notre bouton. Il fonctionne. 12. SUPPRIMENT AVEC CREATEAsyncThunk: La prochaine opération, nous allons effectuer l'opération de suppression. Nous pouvons donc supprimer ce port que nous avons payé en fonction de l'ID. Donc, nous devons d'abord écrire notre action dans notre fichier js post slash dot. Faisons ça d'abord. Dans les ports comme le fichier dot js, je vais avoir une action de plus. Supprimons les publications. Je vais juste copier celui-ci. Je vais juste le coller ici. Et je vais juste changer celui-là. Il s'agira donc de supprimer des publications et ce sera x et intitulé avec la publication de suppression. Encore une fois, nous allons supprimer la publication en fonction de l'ID. Ici, nous allons vaincre l'identifiant de notre composant et l' URL sera additive. De plus, nous devons fournir une méthode ici car nous utilisons fetch ici. Nous devons fournir une méthode ici. Comme supprimer. Jusqu'à présent, vous n'avez pas besoin de fournir de méthode pour obtenir les données d'un serveur JSON ou d'une API . Mais dans le cas d'autres demandes telles que la suppression ou la mise à jour, vous devez fournir la méthode ici. Nous fournissons donc ici la méthode, supprimer. Ce sera une chose additive. Maintenant, nous effectuons des demandes d'API. Cela crée donc un groupe de réflexion, génère trois cycles de vie que nous allons dissoudre dans notre réducteur. Encore une fois, que doit-on faire ? Je vais donc juste copier ces trois cycles de vie qui dépensent complètement la construction et la réalisation. Et je vais le coller ici et m'assurer de changer celui-ci du guide pour supprimer des publications. Et nous pouvons supprimer celui-ci. Il s'agira de la charge utile jet action dot. Utilisons donc cette action que nous avons créée ici dans nos composants. Passons donc au fichier index.js. En onclick. Nous pouvons disperser cette action afin qu' elle puisse supprimer l'enregistrement. Ici. Je vais afficher cette action. Par conséquent, envoyez et supprimez des publications. Par conséquent, le code VS importe automatiquement cette action pour moi. Et nous pouvons disperser cela de cette façon. Nous allons donc afficher le même identifiant que celui que nous utilisons pour remplir l'ID. D'accord ? Avant. Nous pouvons avoir un ID ici, comme cet index de l'ID de point de tableau, Voyons si nous sommes en mesure de supprimer ce port ou non. Pour celui-ci, créons une publication basée sur les cinq ID. Nous avons ce post. Cliquons maintenant sur Supprimer. Maintenant, vous pouvez voir que nous sommes en mesure de supprimer avec succès le port en fonction du même atome que celui que nous avons utilisé pour récupérer l'opération de suppression est également effectuée avec notre boîte à outils de réduction dans ce application. 13. Action POST avec createAsyncThunk: Maintenant, la prochaine opération, nous allons effectuer la création d'un pool d'utilisateurs. Une fois que vous aurez cliqué dessus, créez un utilisateur pour vous, nous accéderons au Create Board. Et quel que soit le port que vous allez créer , vous n'économiserez pas en dB car nous utilisons une fausse API d'espace réservé JSON. Il ne gère donc aucune base de données derrière les coulisses. Vous ne pourrez donc pas sauver ce porc en dB. Mais nous allons imiter cette demande de port à l'aide de cette API. D'accord ? Nous allons créer cette action dans notre premier fichier js diapo dot. Ce que je vais faire, je vais copier celui-ci. Je vais le coller ici. Créez un poste de meilleure note. Nous devons maintenant apporter quelques changements ici. Cette fois, nous créons le pore pour qu'il n'accepte aucun type d'identification. Nous pouvons supprimer cette partie. Après ça. Que doit-on faire ? Méthode ? Nous allons encore fournir les deux méthodes car nous sommes en train de créer un nouveau port. Et après cela, nous devons également fournir l'en-tête. Sinon, cela ne fonctionnera pas. J'ai donc fait des en-têtes, nous devons fournir un vol. Nous pouvons donner JSON à votre application. Ensuite, nous sommes prédéfinis le type de contenu, application de type de contenu. Jason. Nous allons avoir corps, JSON, stringify. Nous allons créer le pore avec le titre et le titre du corps que nous pouvons donner ici. Nous allons recevoir des valeurs. Nous allons recevoir des valeurs de nos composants. Nous pouvons donc creuser cette valeur de cette façon. Nous pouvons avoir comme Valeurs, titre de point. Nous pouvons avoir comme corps corps de points Valeurs. La chose requise sera des additifs. Nous avons créé ce port et ne vous inquiétez pas, je vais expliquer cette partie. La partie valeurs. Ici, la valeur n'est rien, mais elle contiendra un objet avec un titre et des informations de corps. Et c'est là que nous recevons des valeurs de notre composant et nous fournissons le titre et le corps. Mais nous allons devoir remplir notre création car c' est le titre et le corps. Disons que tous les trois promettent que la vie est générée par notre créateur, je pense la langue. Encore une fois, je vais simplement copier le cycle de vie S3. On peut le peindre ici. Et n'oubliez pas de changer celui-ci du carnet de notes pour créer les deux. Copions celui-ci, laissez Pe deux niveaux. Et le reste de la chose sera additif. Nous en avons fini avec la partie réelle. 14. Travailler à créer un formulaire de post: Alors travaillons là-dessus. Créez les deux à partir de notre anti-design. Nous devons apporter un élément. Le composant dont nous allons avoir besoin ici, entrée, bouton, carte, espace. Nous allons également avoir besoin que vous soyez sélectionné et vous serez épargné de notre React. Si grand sélecteur. Lorsque l'informatique doit apporter et utiliser dispatch from react, nous avons également besoin d'un état énorme. Je vais définir un état avec des valeurs. La même valeur que nous allons passer par notre action afin qu'elle puisse recevoir ici dans notre fichier slide dot js. Travaillons sur ce port Create. Un état énorme. Et nous allons définir notre état initial avec un objet. Nous allons avoir le titre et le corps. Et après cela, nous aurons un état hypothécaire. Donc, c'est associé à la moche. Nous utilisons pour décrire deux crées discrètes. Une fois que l'utilisateur crée un mauvais état, alors sur la même page, nous allons afficher qui a créé un état énorme et, au départ, ce sera faux. Après cela, conservons la référence de nous. Il s'agit d' une variable de répartition paginée. Habituellement expédié. Nous allons d'abord travailler sur un composant hors formulaire. Nous allons donc créer un formulaire. Enlevons celui-ci. Nous allons avoir un formulaire. Supprimons la partie action. Et ici, nous allons avoir sur la méthode Submit, que nous allons définir handle submit. Le formulaire que nous allons avoir. Après ça. Nous allons définir notre champ de saisie. Je t'ai donné un espace réservé. Titre. Type, le texte ne change que. Nous allons vous donner. Je peux vous donner des valeurs semblables. Je peux étaler les valeurs et nous ne devons le faire que, et nous pouvons définir le titre sur la valeur du point cible. Maintenant, nous allons avoir des valeurs. Les valeurs, les valeurs. Ainsi, à partir de valeurs, nous pouvons prendre des textures comme le titre et le corps. Dans la valeur, nous pouvons passer le titre. Donnons également un style en ligne à ce champ de saisie. Je vais donc donner 400 pixels. Après cela, je vais avoir un point de lobe supérieur. Ensuite, nous allons avoir une zone de texte. Donc, saisissez la zone de texte point. Après ça. Et en face, je vais copier cette chose. Je vais le coller ici. Ici, il y aura du corps. Il sera attaché et ce sera, et il deviendra corps. La valeur corporelle sera la largeur du corps sera additive. Ou nous devons donner parce qu' il s'agit d'une zone de texte, elle sera donc grande. Maintenant, je vais encore faire quelques pauses. Dans cet espace. Je vais créer un seul bouton ici. Style. Donnons-lui un style. Marge. Dix. Nous allons ajouter un bouton. Je vais utiliser le composant de bouton NTDS N, onclick. Nous allons avoir la méthode OnClick. La valeur du bouton sera le but de retour. Nous allons définir la méthode onclick. Revenons en arrière. En gros, vous retournerez à la page d'accueil uniquement. Va avoir sur le bouton Soumettre. Types d'envoi. Nous pouvons donner un sommet de type HTML primaire. Allons dans le navigateur. Nous avons une erreur, donc nous devons la différer, gérer la soumission. Pour l'instant, créons simplement une fonction vide. Il recevra un événement. Allons dans le navigateur. Nous avons donc ces deux entrées. une est un échec de saisie normal et autre zone de texte que nous avons le bouton retour et soumettre et si vous cliquez sur Retourner en arrière, vous n'arriverez jamais à la page d'accueil. Du routeur React dom. Apportez nous naviguer. Nous allons utiliser Naviguer ici. Utilisez Naviguer. Et ce que nous devons faire. Nous enregistrons la référence de nous naviguer dans la variable et naviguer et un onclick. Nous pouvons naviguer. Nous pouvons vous permettre de naviguer. Nous voulions naviguer vers la page d'accueil. Essayons d'abord celle-ci. Celle-ci, cliquons sur GoBear. Mais maintenant, nous sommes en mesure de naviguer vers la page d'accueil. 15. Dispatch POST createAsyncThunk: Donc maintenant, nous devons travailler essentiellement sur la création de messages. Nous allons donc afficher une action que nous avons créée dans nos publications comme le fichier dot js, gérer soumettre, nous allons désespérer cette action. Maintenant, ce que nous devons faire pour gérer certains éléments recevant un événement jusqu'à présent, nous devons faire un point pour empêcher le comportement par défaut du navigateur. Et après cela, nous pouvons montrer que c'est une action. L'action que nous avons comme créer un code post-soviétique, importer automatiquement que j'ai envoyé pour moi. Et nous pouvons simplement passer les valeurs entières. Cette valeur, en particulier nous sommes en train de structurer les différences ici. Vous pouvez voir que dans notre action Créer des publications, lorsque vous créez les deux taxes et que nous transférons la valeur que nous envoyons par le biais de notre action. Après cela, j'ai voulu entrer le champ de saisie. Ce que nous pouvons faire ici, titre. Donc le titre sera dans Putty, sera l'impulsion. Nous devons également le faire. Donc les deux sont vrais. Au moment où vous soumettez ce formulaire, j'ai voulu afficher le port sur la même page sous ce composant de formulaire que je voulais créer. Ok, c'est pourquoi j'ai un état séparé comme un ensemble. Et cela deviendra vrai. Nous pouvons vérifier celle-ci, si cela crée des affiches fonctionnant ou non. Nous pouvons donc vérifier avec l' aide de la réduction de Deadpool. abord, allons dans le navigateur et passons un test en direct. Et je vais coller du texte ici dans cette zone de texte. J'ai photographié mon texte ici. Vous pouvez voir que Cliquons sur Soumettre. Ouvrons la profondeur de réduction Told. Vous pouvez le voir. Vous pouvez voir que notre promesse s'est concrétisée ici. Et nous pouvons voir que nous avons été piqués. Vous pouvez voir que nous avons notre corps de titre. Vous verrez également qu'un UserID génère éthiquement un ID utilisateur aléatoire. Vous pouvez voir que nous en avons un, en ajoutant un, non l'ID aléatoire créé par notre serveur JSON. Maintenant, ce que nous devons faire pour afficher le portrait créé sous ce composant de formulaire. Une fois que l'utilisateur a envoyé le formulaire. Passons au code VS. Je vais utiliser un énorme sélecteur ici. Vous avez sélectionné Je vais utiliser pour suivre la valeur de l'état à partir de l'état de notre magasin. D'accord ? Nous pouvons avoir une valeur comme la publication et le chargement. Après ça. Nous devons le faire après cela, nous allons avoir une fonction qui est responsable couture des blocs créés ou de publier un blog. À l'intérieur, nous allons revenir. Nous allons également utiliser un fragment ici. Je vais utiliser le chargement. En chargeant si c'est vrai, je vais afficher ou charger composant de la carte qui est responsable de la couture de ce chargeur de personnages. Et je vais fournir un compte ici, un autre, je vais bloquer les deux Tokyo. Une fois encore. Ce que je vais faire, donc je vais dans le fichier index.js. Et je vais juste copier cette chose. Venez ici. Et collons-le ici. Nous devrons peut-être changer. Nous allons d'abord vous donner une div de clôture. Ce sera le test, l'additif Silvia. Cela sera édité. Donc, tout sera édité. Parce qu'une fois que vous avez créé cela pour l'état des publications , un seul tableau d'objets sera créé. Nous pouvons trier ce port créé sous ce composant de formulaire. Je vais encore faire quelques pauses. Et nous pouvons avoir les deux. Vrai. Ensuite, je vais à cet article pour poster un blog. Sauvons celui-là. Allons dans le navigateur. Rafraîchissez celui-ci. Essayons le blog. Et je vais choisir le contenu ici. J'ai imaginé le contenu du corps ici. Cliquons sur Soumettre. Vous pouvez constater que nous sommes en mesure de créer un port avec succès et que nous affichons sous notre composant de formulaire. Nous avons effectué cette opération de création à l'aide de la boîte à outils de lecture de notre application React. La prochaine opération, nous allons effectuer l'opération de mise à jour. 16. Action PUT avec createAsyncThunk: Ainsi, la création de l'opération se fait avec la boîte à outils. Il est maintenant temps d'effectuer l'opération de mise à jour à l'aide de la boîte à outils radar. Nous allons donc d'abord créer une action qui sera chargée de mettre à jour les deux en fonction l'ID dans les ports comme le fichier dot js, nous allons créer une action. Donc, ce que je vais faire, je vais juste copier l'ensemble de l'action. Je vais juste le coller ici. Cela va devenir une mise à jour. Les deux deviendront un tableau de mise à jour. Nous allons maintenant mettre à jour le port en fonction l'ID de notre composant. Nous allons recevoir quelques éléments comme une pièce d'identité. Nous allons mettre à jour le corps. On va aussi passer le titre, d'accord ? Mais nous ne mettrons à jour que la partie du corps du billet de blog unique. Ici, nous devons spécifier l'ID car nous allons mettre à jour le port en fonction de l'identifiant et la méthode sera mise à jour. L'en-tête sera un séjour tel qu'il est dans le corps. Il faut l' injecter, enlever celle-ci. On peut simplement passer des additifs comme le directeur du titre et du corps, la chose sera additive. Maintenant. Maintenant, cela crée un groupe de réflexion, générera un cycle de vie de trois promesses. Nous allons donc gérer à nouveau le cycle de vie des trois promesses dans notre réducteur. Je vais donc juste copier les trois vies naturellement ici. Et je vais juste le peindre. Et assurez-vous de mettre à jour depuis le carnet de notes pour le mettre à jour. Ce sera un tableau de mise à jour. Ce sera également une mise à jour connue pour changer tout cela ici. Et nous devons définir une succession, un état initial supplémentaire que nous devons définir. Nous allons mettre à jour uniquement la partie corporelle du corps sera initialement de l'empathie et il y aura un mode d'édition. Donc, au départ, ce sera faux. Nous allons également prendre des mesures supplémentaires. Je vais donc définir cette action dans le réducteur. Cet accident a donc été responsable de l'activation du mode édition. Nous allons avoir comme ça. Cela aura un état et une action. Ici. Nous allons avoir un état pointillé c'est égal à la charge utile réelle. Nous allons recevoir cette chose de notre composant. Nous devons faire une autre mise à jour comme le point d'état, le corps, le point, la charge utile et le corps. Nous allons recevoir deux choses, comme le mode d'édition et la partie corps du tableau de blocs unique. Exportons également cette action. Ce que nous pouvons faire ici, nous pouvons avoir comme export const, vanter, trancher, point, action. Et nous pouvons donner ici comme un set edit. OK. Revenons maintenant à la partie UI. Revenons ici. Allons chercher un post ici. Nous avons maintenant un bouton de modification ici. Et une fois que vous avez cliqué dessus, vous avez fait cette partie du corps avec l'Italie convertie en zone de texte. Et la valeur du bouton recevra également Change. Valeur du bouton, bonne. Modifiez pour enregistrer. 17. Populer des données postales sur le formulaire: Donc, un fichier index.js. Ce que nous devons faire en premier, nous allons recevoir ce nouvel état que nous venons de définir dans nos publications comme objet fichier dot js, extrayant ceux listés au-dessus du sélecteur américain. Et voici ce que nous devons faire. Maintenant, nous allons avoir notre mode. Nous sommes en mode édition. Ensuite, ce que nous devons faire, nous allons avoir un fragment ici. Une autre partie. Nous montrons simplement cette partie du corps qui vous a dit qu'elle ne modifie pas le post. Maintenant, toute la logique que nous devons définir dans cette partie de fragment, en éditant la publication. Donc ce que je vais faire, donc à partir de là, nous allons avoir OnClick. Nous allons envoyer une action. Envoi. Et nous allons déplacer cet idiot. D'accord ? Une fois que l'utilisateur clique sur ce bouton d'édition, le mode devient vrai, donc vrai. Et nous devons également passer le corps. corps précieux. Nous pouvons donc obtenir les poteaux de lumière du corps 0 point corps. Mettons en forme celle-ci. Nous allons enregistrer le fichier. Maintenant, voici ce que nous devons faire, donc il sera entre parenthèses. Nous allons donc vous donner un support. Ici. Nous allons avoir une zone de texte, des lignes de zone de texte pour avoir des valeurs. D'accord ? Nous devons donc définir l'état initial. Nous devons définir un état pour ces valeurs corporelles. Donc, ici, ce que nous pouvons faire, nous pouvons avoir un état de plus comme le body tag. Parce que nous mettons à jour le corps du billet de blog unique. Nous ne débattons pas du jeu de titres. Ce sera de la pitié. Et là, je vais faire un effet énorme. Effet d'utilisation. Utilisons Effect run une fois que nous avons la valeur dans notre corps. Je parle de ce corps que nous avons défini dans nos posts ly dot js file. Nous avons le corps. Puis corps. De cette façon, nous pourrons remplir la valeur du corps dans une zone de texte ici, ce que nous aurons du corps, d'accord. Nous allons avoir du changement. Il aura un ensemble d'événements, corps de texte, un point, une cible, un point, une valeur. Ensuite, nous allons avoir deux boutons. Le nom du bouton sera comme enregistrer et annuler. Par utilisateur a la possibilité d'enregistrer la publication et il peut également annuler le processus de mise à jour. Nous allons donc devoir cliquer avec sept annulations. Je vais utiliser votre espace. Ajoutons que nous allons avoir un modèle de taille. D'accord ? Je vais avoir une marge de carrelage, la marge cinq premiers reste. Je vais donner cinq à la marge de gauche. Entre cet espace, nous allons avoir nos deux boutons. Type de bouton, principal. Nous allons avoir une table, d'accord ? On va avoir un autre bouton qui sera le cancer. Si vous cliquez sur l'annulation, vous sortirez essentiellement du mode Édition. Si vous cliquez sur le bouton Annuler, ce sera tout simplement normal. abord, vous pouvez vérifier si nous sommes en mesure de renseigner la valeur corporelle du blog dans une zone de texte ou non en cliquant sur le bouton Modifier. Rafraîchissons celui-ci. Faisons face au post avec la pièce d'identité trois. Cliquons sur Modifier. Nous sommes donc en mesure de publier la valeur corporelle de bloguer une zone de texte. Ce truc, on ne veut pas ça. Bon, passons au code VS. Ce que nous pouvons faire ici. Nous pouvons donc vérifier ici comme tout cet espace. Nous pouvons vérifier ici comme si vous y étiez, si vous n'êtes pas en mode édition. Donc, dans ce cas, nous ne voulions que ce bouton d' édition et de suppression. Coupons celui-là. Allons dans le navigateur. Différencier. Remplissons le post. Maintenant, nous avons ces deux boutons. Et une fois que vous avez cliqué sur le bouton Modifier , vous êtes maintenant en mode édition. Dans ce cas, je ne veux pas qu'il affiche ces deux boutons. Une fois que l'utilisateur clique sur Enregistrer ou annuler , ces deux boutons s'afficheront ici. 18. Dispatch PUT createAsyncThunk pour mettre à jour: Jusqu'à présent, nous allons avoir la méthode OnClick. Ici. Nous allons l' envoyer à l'action. With Ugly est utilisé pour mettre à jour le port de bloc unique avec la valeur corporelle. D'accord ? Nous allons donc envoyer ici une action que nous avons créée dans notre fichier js post slash dot. Nous devons donc passer comme une pièce d'identité, une pièce d'identité. Nous allons également envoyer le titre, le même titre que celui que nous allons envoyer car nous ne modifions pas le titre. Nous ne mettons à jour que la valeur corporelle du blog et du corps. Nous allons envoyer la température corporelle. ne faisons que changer cette valeur. Si vous cliquez sur le titre. Nous devons donc arrêter le processus de mise à jour. Donc, dans l'ensemble, il sortira du mode d'édition. Dans ce cas également, nous devons envoyer une action. Nous allons encore avoir la méthode OnClick ici. Nous allons envoyer, envoyer. Dans ce cas, ce sera faux. Ici aussi, nous devons envoyer une autre action. Modification de l'envoi. Une fois que vous avez cliqué sur la modification, nous voulions essentiellement sortir du mode Édition. Nous devons donc également envoyer l'année à ce jour dans GitHub en mettant à jour la valeur corporelle d'un article de blog unique. Ici, nous allons à nouveau tracer la modification false. D'accord ? Et après cela, nous devons essentiellement faire en sorte que ce corps imite. Ici aussi, nous pouvons passer le corps à l'infini. Nous en recevons ici. Ce sera donc une virgule. Nous allons donc enregistrer ce fichier. Et allons dans le navigateur. Rafraîchissez celui-ci. Nous allons commencer à zéro. Faisons face au blog. Attendez la pièce d'identité cinq. Maintenant, cliquons sur Modifier. Nous sommes maintenant en mode édition. Et si cela donnait un test, nous ne sommes pas en mesure de mettre à jour la valeur. Donc, la dactylographie ne fonctionne pas ici. Laissez-moi voir ce qui se passe. Dans le changement. Ce que nous devons faire. Donc, il y a quelque chose qui ne va pas ici, je suppose. Donc, ici, nous devons montrer le corps. corps. Allons dans le navigateur et récupérons le tableau en fonction de l'identifiant utilisateur cinq. Cliquons dessus. Nous sommes maintenant en mode édition. Maintenant, mettons à jour cette valeur corporelle de Blackboard. Nous allons vous donner un blog en direct mis à jour. Si vous cliquez sur Enregistrer. Nous avons la valeur corporelle mise à jour du blog ici, vous pouvez voir que nous avons mis à jour body like blog. Nous devons effectuer fidèlement opération de mise à jour avec la réduction au liquide et quelle que soit la mise à jour que vous effectuez ici, elle n'économisera pas en dB car espace réservé JSON n'est pas n'importe quel type de base de données derrière les coulisses. Si vous reformulez et affrontez nouveau le poète avec le même identifiant que quatre, vous obtiendrez l'ancienne valeur corporelle de cet article de blog. 19. Application cocktail du projet 2 - Démo: Bienvenue dans cette section. Dans cette section particulière, nous allons créer notre application à l'aide de Redact Toolkit à l'aide de Create Tasting. Il s'agit d'une application cocktail, où nous allons laisser tout le cocktail en faisant une demande d'API tierce l'aide de create tasting thing. Nous allons donc vendre tous les cocktails de notre page d'accueil. Comme vous pouvez le constater, cette API tierce renvoie environ 20 cocktails. Vous pouvez, vous pouvez le voir sur la page d'accueil. Vous pouvez également consulter le cocktail individuel afin de lire plus d'informations sur ce cocktail en particulier. Donc, si vous cliquez dessus, il y a un bouton de détails. Vous naviguerez vers une page de cocktails unique où vous pourrez obtenir plus de détails sur ce cocktail de base. Et si vous cliquez sur Google, vous reviendrez à la page d'accueil. Maintenant, vous pouvez également le régler sur un cocktail spécifique. Je vais donc vous donner un mot clé comme Adam. Vous pouvez voir qu'avec le mot clé atom, il est écrit pour cocktail. Nous avons également implémenté cette fonctionnalité de recherche dans notre application cocktail avec un kit d'outils de rédaction uniquement. Dans l'ensemble, nous allons créer cette application dans cette section, laquelle le Reader Toolkit utilise pour créer un intergiciel de symptômes. Et avant de commencer à créer cette application, nous allons comprendre un peu comment créer un intergiciel de think tank et nous allons le comprendre dans la vidéo suivante. Je vous verrai dans la prochaine vidéo où nous allons discuter de la création d'un intergiciel. Ensuite, nous allons commencer à créer cette application. 20. Application cocktail du projet 2 - configuration: Maintenant, je suis dans ce répertoire et je vais ouvrir une invite de commande ici. Ouvrons donc une invite de commande. Et je vais créer un projet avec la commande et l' application px Create React et le nom du projet. Le nom du projet sera toolkit cocktail. Je vais donc donner le nom de ce projet et appuyer sur Entrée. Je pense donc avoir utilisé le NPM. Ce sera donc n p x naught NPM. Changeons donc celui-ci et appuyons sur Entrée. Et il faudra environ deux à 3 minutes pour installer toutes les dépendances inutiles. Et je reviendrai une fois que toutes les dépendances seront installées. Il semble donc que la configuration de notre projet soit maintenant terminée. Passons donc d'abord à ce répertoire qu'est Toolkit Cocktail. Passons donc à ce répertoire. Et les gars, nous devons installer certaines dépendances. Avant de démarrer npm, installons ces packages. Les packages sur lesquels nous allons travailler sont comme React Router, dom. Nous avons besoin d'un routeur React pour créer cette application. React Redux. La chose la plus importante est la boîte à outils redox. D'accord ? Redux, dernière boîte à outils. Pouvez-vous, les gars, vous n' en avez besoin pour créer cette application à l'aide de la boîte à outils Redex. Attendons l'installation de ce package et je reviendrai une fois que tout le paquet sera installé. Les gars, tous les paquets sont-ils installés ? Maintenant, je vais faire et payer pour démarrer ce projet que j' ai déjà ouvert dans le code de Visual Studio. Revenons donc au Visual Studio Code. Et maintenant, vous pouvez voir que notre projet a été compilé avec succès. Passons donc au navigateur. Vous pouvez voir que nous n'avons aucun problème. Et abordons également le club de lecture sur le design matériel dans notre application. Nous allons donc utiliser ce jeu de carreaux. Donc, ce que je vais faire, donc ce que vous devez faire, c'est d'aller sur ce lien et de simplement copier cette partie. Nous allons utiliser cette configuration de style, la conception matérielle Bootstrap Five. Mais cette application, et entrons dans le code de Visual Studio. J'ai donc copié cette feuille de style. Et dans le fichier index.html public, il suffit de le coller ici. D'accord ? Nous en avons donc fini avec ce matériel héréditaire que Bootstrap. 21. Application de cocktail du projet 2 - en-tête: Nous allons donc maintenant commencer à travailler sur le composant d'en-tête. Alors héritez du fichier dot js de ce que nous allons faire. Il aura donc un contenu très basique dans le fichier d'en-tête dot js. Nous utilisons donc l'état du hashtag du matériel pour le booster n cinq. Nous allons donc utiliser le nom de la classe. Donc, le nom de la classe avec light, navbar, light. Alors sois la lumière. Et cela sera corrigé. Haut. D'accord ? Donc, nous allons maintenant utiliser cette classe, puis nous allons avoir une autre division avec la classe du liquide de conteneur. Ensuite, à l'intérieur, nous allons avoir le mot clé ban. Et nous allons avoir un autre disque de platine dont le nom de classe sera clair. Ils couvrent la balise et le nom de la classe sera navbar, brand. Et la marge inférieure est de zéro à un, t1, puis l'en-tête, le titre, puis les zones de texte. D'accord ? Ce sera donc le nom de classe pour une balise span. Et nous pouvons vous donner la vie, trouver votre cocktail préféré. D'accord ? Voici donc le contenu très basique que nous avons dans notre fichier hero dot js. D'accord ? Et celui-ci, et celui-ci sera le GPS, d'accord ? Ne pas le faire. Faisons une chaîne celle-ci. Nous en avons donc terminé avec ce composant d'en-tête. Cela ne doit donc que contenir le contenu du fichier d'en-tête point js. Et je vais peindre cette image floue dans le fichier CSS à points d'index. Je vais payer en code CSS pour ce fichier CSS à points d'index. Et entrons dans le fichier app.js. App.js cinq minutes pour importer le code VS du composant d'en-tête automatiquement le code VS du composant d'en-tête pour ce composant d'en-tête. Et allons dans le navigateur pour vérifier si ce composant d'en-tête fonctionne ou non. Vous pouvez voir que nous avons ce bel en-tête. Trouvez votre cocktail préféré. 22. Application cocktail du projet 2 - Configurer Redux-Toolkit: Nous allons maintenant travailler à la présentation du cocktail. Nous allons donc d'abord configurer la boîte à outils du lecteur dans notre application. Alors, les gars, configurons la boîte à outils de rédaction dans notre application. Donc, au lieu de voltage, nous allons avoir un autre dossier appelé fonctionnalités. D'accord ? Et en théorie, en réduisant cela, nous allons avoir un fichier qui sera store dot js. Et en troisième lieu, il y a la fonctionnalité. Nous allons faire voler le cocktail de dossiers. D'accord ? Comme nous travaillons avec le cocktail dans cette application, le nom du fichier ressemblera à celui de cocktail slice. OK, donc dans les slides des cocktails, nous allons faire toutes les demandes asynchrones et mettre à jour la boutique. OK, donc d'abord, nous devons créer des diapositives et créer un groupe de réflexion à partir de la boîte à outils Redux. OK, apportons d'abord ces choses. Nous devons apporter, créer des diapositives et créer n'importe quoi. Ainsi, dans une boîte à outils plus complète, les lecteurs peuvent être inclus par défaut, ce qui leur permet d'exécuter une logique asynchrone de suppression avant d'envoyer le processus, le désert au réducteur. Dans le cas du béton particulièrement irritant, ils sont responsables de l' exécution de tâches asynchrones. C'est pourquoi nous allons les créer de manière asynchrone pour effectuer les tâches asynchrones et créer des diapositives. En gros, une fonction qui accepte et prend initialement un objet de fonction réductrice et c'est la foudre. Ensuite, il a généré automatiquement une action, créé un accent correspondant au réducteur et il est resté. Ainsi, à l'aide de la boîte à outils de retest, vous n'avez pas à créer une action distincte, un réducteur de type d'action sur un fichier d'actions. Tout sera donc généré automatiquement à l'aide de diapositives. Et écrivons toute la logique asynchrone à l' aide de la boîte à outils du lecteur. Plus précisément, nous allons récupérer toute la liste des cocktails et l' afficher sur la page d'accueil. Écrivons donc comme le coût d'exportation l'indique. D'accord. Donc, en gros, il sera chargé de réparer tous les cocktails. À l'aide de l'API, nous allons utiliser la notation de crédit effectuée. Et en gros, cela acceptera les trois paramètres qui sont un type d'accent, qui seront la chaîne, une fonction de rappel. Et puis c'est facultatif, c' est un objet, d'accord ? Ce sera donc le troisième paramètre, sera l'objet et qui n'est pas facultatif. D'accord ? Définissons-le donc en dix types, qui sera la chaîne. Donc, puisqu'il s'agit du cocktail, définissons comme des cocktails. Et ce sera comme un pitch. Des cocktails, d'accord ? Quels cocktails ? Et le deuxième paramètre, nous allons avoir une fonction de rappel légère. D'accord ? Donc, cette fonction de rappel effectuera essentiellement la demande d'API. D'accord ? Nous allons être énormes, je pense. Et pour faire la demande d'API, nous allons utiliser uniquement le phage. Retourne h. Nous allons coller l'API ici. Je vais juste coller l'API dans ce phage. Je vais donc simplement coller l'API ici. Donc, cet APA que nous allons utiliser reçoit tout le cocktail. Donc, en gros, cette API a renvoyé 25 cocktails, d'accord ? Environ 25 % de rendement. Vous pouvez donc voir qu'il en retourne environ 25 cocktails dans mon Postman. Passons donc au code Visual Studio et à la résolution de la promesse après avoir effectué les demandes d'API. Nous allons donc passer à la méthode de la tanière. Nous obtiendrons la réponse. Et ce ne sera qu'une réponse, Jason. D'accord ? Les gars, le paramètre de création est activé, merci, ce n' est pas une option et nous en avons terminé avec la première action qui consiste à récupérer tous les cocktails de cet APA. Maintenant, cela crée un groupe de réflexion dont l'Italie a généré trois cycles de vie promis qui sont en attente, remplis et qui reflètent ce cycle de vie que nous allons gérer dans le réducteur supplémentaire. Donc, en gros, un réducteur supplémentaire gère la demande asynchrone. D'accord ? Nous allons gérer ces trois cycles de vie : les dépenses sont remplies et rejetées. Nous allons gérer le réducteur supplémentaire, qui sera chargé de gérer la demande asynchrone. Nous allons donc utiliser la création de diapositives à cette fin uniquement. Maintenant, ce que nous pouvons faire ici, c'est const Cocktail Slide. Et nous allons utiliser tout en créant des diapositives. Donc, ce sera essentiellement une acceptation, un nom de mouche, un nom si léger que vous pouvez lui donner comme un cocktail uniquement, des cocktails. Et deuxièmement, il tentera de revenir à l'état initial. Vous devez donc vous défendre dans un premier temps. Dans un premier temps, notre application ressemblera à des cocktails, au programme et à la PTA. Et nous allons également prendre un seul cocktail. Ce sera également le seul chargement que nous utiliserons. Ce sera donc le faux au départ et l'erreur que nous allons également utiliser, ce sera le null. Nous avons donc défini le taux initial. La troisième chose que nous allons définir est ce réducteur supplémentaire. Reducer, nous allons gérer les trois cycles de vie promis générés par la création d'un groupe de réflexion en attente, rempli et rejeté. Nous allons donc utiliser ta jambe, quels cocktails et quelle peinture. Et après cela, nous aurons une action de l'État. Et ce sera comme si l'état ne se chargeait pas pour régner. D'accord ? La peinture signifie donc que nos données sont en cours de traitement. Nous n'avons pas reçu les données. À l'UAB, nous n'avons donc pas reçu les données. En attendant, nous allons afficher une sorte de spinner. C'est pourquoi j'utilise le chargement jaune. D'accord. Et cela s'est réalisé. Donc fh.com, donc le lot de cocktails de phages est rempli. Et il va y avoir l'État, l'action de l'État. Et maintenant, ce que nous allons faire : des cocktails à points et à états. Et nous pouvons utiliser ici une action légère, pas une charge utile. Ce sera donc une charge utile à points d'accent légers et des boissons. Alors pourquoi nous utilisons Like X N Dot Payload Dot Drink. Si vous revenez aux Pokémon, vous pouvez voir que nous devons cibler les boissons ici, d' accord, alors vous aurez droit à tout ce cocktail. C'est pourquoi nous utilisons ici des boissons x n point payload point. J'espère que tu comprends maintenant. Et si le chargement des points thêta1 sera également faux une fois que nous aurons reçu les données sur notre interface utilisateur. Et définissons également le rejeté. Vous devez également donner la virgule ici. Sinon, vous obtiendrez cet en-tête et celui-ci sera rejeté. D'accord ? Dans ce cas, vous pouvez simplement avoir la charge utile du point d'action. Et ce sera l'erreur d'État. D'accord ? Nous devons maintenant exporter celui-ci. Exportons donc le réducteur de points Cocktail Slice par défaut . Maintenant, nous allons essentiellement configurer le magasin avec une boîte à outils 3D est très facile à configurer. Deux à trois lignes de code suffisent pour configurer cette visite guidée avec la boîte à outils Elbow Predict. Nous devons apporter la configuration à partir de la boîte à outils de bureau. Restauration ainsi configurée. Et importons un réducteur de cocktails. Problème de réducteur. En vedette. Les cocktails volent, d'accord. Et exportons les valeurs par défaut. Boutique fournie. Et nous pouvons atteindre la valeur clé de nos réducteurs déjà indiquée. Et en fait, nous allons définir la clé. Je vais donc définir l'application et le producteur de cocktails tendres. À l'aide de la clé de l'application, nous nous rendons dans l'État, peu importe ce que nous avons dans notre magasin. Donc, quel que soit l'état que nous avons défini ici dans notre diapositive, nous allons accéder à tout cela, l'état depuis un magasin en utilisant la valeur clé. D'accord ? Nous devons maintenant effectuer un détachement plus petit dans notre fichier index.js. Donc d'abord, nous devons amener le magasin. De plus, nous devons apporter le fourni, fourni par React Redux. Apportons donc ce qui est fourni par React React Redux. Donc, du réacteur, bande de canards, nous avons besoin d'un fournisseur. Et ce que nous pouvons faire ici, fournisseur, et éliminons toute cette partie. Et collons-le ici. Et nous allons définir le magasin et simplement le trouver. Ils disent qu'en gros, notre application React peut y accéder, c'est ce que nous avons défini dans notre tranche de contenu. OK, les gars, maintenant nous avons configuré les kits d'outils de rédaction pour qu'ils soient entièrement intégrés à notre application. Et vous pouvez également vérifier celui-ci dans le navigateur. Allons donc dans le navigateur, actualisons et ouvrons l'outil de développement. Vous pouvez donc voir la date ici. Il s'agit de l'état initial de notre application. Nous avons donc des cocktails avec la saisie t lors d'un cocktail ou d'une erreur de chargement. C'est le même que celui que nous avons défini initialement dans notre fichier cocktail slide dot js, que nous avons défini avec succès dans notre fichier .js, lequel nous avons configuré avec succès la boîte à outils de rédaction dans notre application. 23. Application de cocktail du projet 2 - Composante de recherche: Alors les gars, nous allons maintenant travailler sur le champ de saisie de recherche. Passons donc au code de Visual Studio. Nous allons donc créer un fichier ici. Tu peux aller en prison. Et nous allons également avoir un fichier CSS. Mais la troisième entrée aussi. D'accord ? Et générons d'abord un extrait ici. Et après cela, nous aurons quelques crochets. Nous allons donc avoir besoin de ce crochet dans notre fichier d'entrée de recherche. Nous allons donc utiliser un utilisateur d'ici. Et après cela, nous devons également apporter le fichier CSS pour cette entrée de recherche. Alors allons-y également. C'est du CSS à points d'entrée. Et je vais payer le code CSS pour ce fichier CSS Hurricane Put Dot. Alors les gars, je viens de choisir le code CSS pour ce fichier CSS à points d'entrée de recherche. Vous pouvez copier tout cela ici, score du test si vous le souhaitez. OK, en interrompant cette vidéo, j'espère que vous en avez une copie. Je vais juste appuyer sur Exporter. Et entrons dans ce fichier hydrogen put dot js. Et là, ce que nous pouvons faire en retour, que nous n'allons pas utiliser la balise div. Et vous allez avoir le nom de la classe ici. Le nom de la classe sera la section. Ce n'est pas grave. Ensuite, nous aurons un autre nom de classe avec le formulaire. Nous allons donc être la balise de formulaire et le nom de classe sera la forme la plus juste. Nous n'avons pas besoin d'action, de forme verbale. Et indique-nous où nous allons passer une journée. Le nom de la classe, le contrôle du formulaire. D'accord ? Et en fait, nous allons avoir un label. Passons donc au nom. On peut t'en donner, comme ce cocktail. D'accord ? Et nous allons avoir une contribution ici. Donc, cette entrée, nous allons avoir le type. Le type sera donc le nom en texte uniquement. Nous ne pouvons que donner un nom. Vous pouvez donner une pièce d'identité ici. Ils ne seront que le nom. Et utilisons le, utilisons également le représentant ici. Donc const value, utilisez-le ici. Et nous allons l' utiliser ici, d'accord ? Valeur de compromis. Donc, vous pouvez donner une valeur de recherche ici. Et le reste de la logique, nous l'écrirons plus tard, une fois que nous aurons laissé sur toute la liste des cocktails. D'accord ? Donc, nous écrirons le rythme de la logique pour ce fichier d'entrée de recherche plus tard, d'accord ? Une fois que vous aurez affiché toutes les dates du cocktail sur la page d'accueil. Donc, ce que nous pouvons faire ici pour l'instant, alors allez dans le fichier index.js, ingérez, apportez le composant de saisie de recherche, d'accord ? Et retirons celui-ci. Nous n'avons pas besoin de celui-ci. Et entrons dans le navigateur. Et passons simplement à la page d'accueil. Maintenant. Vous pouvez maintenant voir que nous avons ce champ de recherche et nous écrirons la logique plus tard, une fois que nous aurons affiché toute la liste des cocktails sur cette page d'accueil, d'accord. 24. Application de cocktail du projet 2 - Montrer les cocktails en utilisant les actions: Ensuite, nous travaillerons à lever tous les cocktails sur notre page d'accueil. Nous allons donc définir le composant ici. Définissons donc ici un composant pour afficher tous les cocktails laissés sur notre page d'accueil. Le nom du composant sera comme list point js. Et générons d'abord cet extrait de code. À partir de React, nous avons besoin de quelques hooks tels que UC State et Use Effect. Et c'est tombé du réacteur ? Nous avons donc besoin que vous soyez sélectionné et utilisé lors de l'expédition. Vous avez sélectionné et utilisez le formulaire d'expédition réactivé. Apportons donc ces choses également. Sélecteur d'occasion. Et vous aurez également besoin de cet axone. Ce sont des cocktails de phages. De notre tranche de cocktail. Nous devons revenir au dossier de rédaction, puis au dossier des fonctionnalités, puis à la tranche de cocktail. Et nous devons apporter les cocktails de phages. Et nous allons également utiliser le lien depuis le routeur React vers le bas. Apportons également le lien. Routeur React Dom. Et d'abord, ce que nous allons faire, tout d'abord, nous allons extraire l'état de notre boutique avec l'aide de la personne que vous avez sélectionnée. Tu as sélectionné. Nous pouvons encore l'utiliser pour extraire le diktat que nous avons défini dans notre code. Nous pouvons faire quelque chose comme ça. Non, car notre cocktail pour le faire est enregistré avec la clé de l'application. Si vous revenez au fichier store dot js. D'accord, à l'aide de cette clé d'application, nous pouvons extraire l'état dans lequel nous avons défini nos slides de cocktails. Nous pouvons donc activer l'état, afin d'extraire tous les états que nous avons définis dans nos cocktails. toboggans à cocktails avec le coude se trouvent dans notre plat à cocktails Dot JS. Pour avoir remonté le cocktail. Nous allons avoir besoin de cocktails. D'accord ? Et nous aurons également besoin d'un chargement. Et nous devons encore définir quand un État est un État. Ce sera donc comme un cocktail modifié. D'accord ? Alors préparez un cocktail modifié. Ce sera l'entrée D. Et stockons également la référence de l' énorme variable de répartition Intuit Dispatch. Parce que nous allons également devoir envoyer cet axone de cocktails de phages. Et nous allons envoyer cette étape. Les blocs intérieurs sont immenses. Nous allons donc utiliser l'effet Hughes ici. Ce sera l'entrée t. Cela signifie que nous allons afficher lors du chargement initial de l'application. Chaque fois que l'utilisateur chargera une application, nous enverrons ces cocktails avant-gardistes, d'accord ? Et nous pouvons également vérifier si celui-ci fonctionne ou non. Nous allons donc vous donner une liste de cocktails légers à lire. OK. Nous devons donc également apporter cette liste de cocktails ici dans notre dossier Pages. OK, donc index.js, nous devons apporter la liste des cocktails. Vous pourriez donc importer automatiquement ce composant pour moi. Et passons au navigateur. Et maintenant, vous pouvez voir que nous avons tous les cocktails. Nous avons donc environ 25 cocktails. Vous pouvez voir que nous avons acheté tous les cocktails. Revenons donc au Visual Studio Code. Et maintenant, ce que nous devons faire, d' abord écrire un autre effet d'utilisation. Parce que nous allons changer certains noms ici. Vous pouvez donc voir que nous avons un nom étrange ici. Carte d'identité, nous avons une carte d'identité, buvez, les gars. Quelques propriétés d'objets. Nous allons renommer. OK. Alors faisons-le également. Nous allons donc avoir un utilisateur de plus, et c'est pourquoi j'ai défini ici l'état du cocktail modifié. Cet utilisateur ne fonctionnera qu'une fois que nous aurons l'heure du cocktail à stocker. Cet effet énorme se produira également si ces cocktails étaient bien changés. D'accord ? Nous pouvons donc vérifier ici, mais si nous avons des cocktails, nous pouvons avoir des cocktails comme neufs. Et nous pouvons simplement cartographier les cocktails, car il s' agit d'une gamme d'objets que vous pourrez utiliser ici. Nous pouvons donc utiliser la fonction cartographique. Et à partir de l'objet, nous allons détecter une partie de la propriété. La boisson légère et soignée de la propriété. OK. Alors j'ai bu. Nous pouvons faire de la texture, puis une boisson STR, puis une boisson FTR, Tom, puis une TR. Alors je vais juste y aller et copier le truc. Alors celui-ci est là. D'accord ? Et classe STR. C'est la dernière propriété dont nous avons besoin. Et après cela, nous allons renommer cette propriété parce que cela semble un peu bizarre. D'accord ? Ce sera donc un nom de bague légèrement ajouté. Nous pouvons avoir une image similaire à FTR Drink. Donc ce sera comme STR, buvez, venez tirer. Ce sera l'alcoolique STR. Et je suis content que ce soit du STR et du verre. Vous pouvez voir que tous ces noms correspondent à nous. C'est pourquoi, c'est pourquoi j' ai renommé toute cette propriété. Nous pouvons donc utiliser le même nom d'identification image1 pour le verre. Ensuite, nous pouvons associer le cocktail modifié aux nouveaux cocktails. OK. Donc, à l'intérieur, si nous n'avons pas de cocktail , alors le surveillant modifié à l'infini. D'accord ? Et utilisons également le chargement. Donc, si vous avez le chargement, cela signifie que nos données sont en route. Nous n'avons pas reçu ces données RTI jusqu'à présent. En attendant, nous pouvons afficher le chargement. OK, donc une sorte de spinner dont nous pouvons afficher le retour. Nous pouvons l'avoir ici en direct avec le nom de classe div Painter. Je peux grandir. OK. Ce sera ce rôle. Ici, nous utilisons essentiellement fichier bootstrap Material Design, d'accord ? Et nous pouvons avoir une balise span avec le nom de la classe visuellement masqué. D'accord ? Et nous pouvons avoir ici comme chargement et dans le retour. Et nous pouvons supprimer celui-ci. Cela va avoir un conteneur LastName. Ensuite, nous aurons un autre nom de classe. Nous allons donc utiliser le matériel aujourd'hui après le nom de la classe ici. Donc, une ligne, je peux appeler des colonnes. J'en ajoute un, puis la ligne m' appelle tiret trois, puis G tiret quatre. Et nous pouvons utiliser ici ces cocktails modifiés. Vous pouvez utiliser votre carte. D'accord ? Nous pouvons simplement capturer toutes ces propriétés que nous avons renommées mais que nous avons renommées : identifiant, nom, image et Fogler à partir de l'article. Donc, l'article et nous pouvons simplement prendre une photo d' identité, un nom, une image, un verre. Ensuite, nous pourrons revenir ici. Et ce retour intérieur aura un nom de classe avec la colonne. OK. Et nous devons fournir la clé. Il sera donc l'identifiant. Ensuite, nous aurons la médaille de platine avec la voiture. Il se trouve donc que Car Edge a égalisé ça. Nous allons avoir dans l'image avec la carte de nom de classe, tiret IMG en haut. D'accord ? Et nous allons définir la source. Nous avons donc déjà la structure, l'image de l'article, et nous pouvons avoir le nom. D'accord ? Ensuite, nous aurons le div avec le corps de la carte de nom de classe. D'accord ? Et nous allons utiliser le pavage Atlantic, pour que le texte distribué soit aligné à gauche, d'accord. Et dans le div, nous allons avoir la balise h5 avec le nom de la classe, le titre de la carte, d'accord. Et ce titre va leur porter un nom. D'accord ? Et nous allons simplement copier à nouveau une fois de plus. Et ce sera le bord fertile. Et ce sera le verre. Et nous allons avoir une balise P avec le texte de la carte de nom de classe, d'accord ? Et en fait, nous allons avoir des informations, d'accord ? Ensuite, nous aurons un bouton de détail. Nous allons utiliser le lien. Et nous allons avoir un bouton, bouton avec le nom de classe btn. Btn dans quatre, d'accord ? Et cela aura des détails. Et cela vous dirigera essentiellement vers la page du cocktail unique. Si vous souhaitez généralement voir les détails cocktail en particulier qui a été routé, vous êtes déjà enregistré dans notre fichier app.js. Nous avons donc l'une ou l'autre voie spécifique à la pédiatrie ici, donc nous l'avons déjà rejetée. Vous pouvez le voir dans notre fichier app.js, cocktail, d'accord ? Et nous devons spécifier l'identifiant. Voici donc une liste de cocktails. Nous pouvons vous donner votre carte d'identité. OK. Je pense que c'est terminé. OK. Et nous pouvons vérifier si celui-ci fonctionne ou non. Passons donc au navigateur. Vous pouvez donc maintenant voir que nous sommes en mesure d' afficher tous les cocktails qui se trouvent sur notre page d'accueil. OK. Cela fonctionne donc bien. 25. Application de cocktail du projet 2 - Action pour récupérer le cocktail: Dans le prochain article, nous allons travailler sur l' affichage d'un ascenseur à cocktails unique sur la route des cocktails. Ainsi, une fois que l'utilisateur aura cliqué sur le détail, il en sera même pour tous les détails concernant ce cocktail en particulier. Nous allons donc revenir au code de Visual Studio. Donc, pour afficher les informations sur le cocktail unique, nous devons travailler sur ce fichier. D'accord ? Donc, avant de travailler sur ce fichier, nous devons d'abord travailler sur la tranche de cocktail. Donc, ici, nous devons d'abord écrire l'action. Que pouvons-nous faire ici ? Je vais donc juste copier-coller celui-ci. Parce que rien que ça, nous allons devoir changer cette partie de l'APA, d'accord ? Je vais juste coller l' API requise ici. Nous allons donc utiliser le TPA pour perfectionner le cocktail unique en fonction de l'identifiant. Tout d'abord, renommez tout ça, d'accord ? Ce sera le premier cocktail unique, et renommons également le même type. Nous allons recevoir cet identifiant de notre composant, donc moins que ce détecteur, la lumière idéale de cette manière. Et nous devons également définir les trois cycles de vie promis pour cet Ax et cet Ay. Je vais donc simplement copier tout cela et le coller ici. Et nous devons renommer celui-ci. Ce sera donc le cocktail unique de phages. Et dans ce cas, vous devez également cibler leurs boissons, d'accord. Et n'oubliez pas de changer celui-ci. Donc cette fois, nous avons affaire à un seul cocktail, d'accord ? Cette zone ne contiendra donc qu' un seul objet car ce sera la réponse PER pour afficher les informations relatives à un cocktail unique. D'accord ? Encore une fois, vous devez cibler les boissons à points Accent Dot Payload. D'accord. Nous en avons donc terminé avec la logique dans notre contexte, légère ou GAS pour aller chercher le cocktail unique. 26. Application de cocktail du projet 2 - Page de détails du cocktail: Passons donc à ce fichier js cocktail point unique. Dans ce fichier, nous devons d'abord apporter un nouveau crochet, comme vous le dites. Utilisez l'effet, d'accord ? Et nous voulons également avoir besoin d' un lien depuis le routeur React en panne. Et nous allons également devoir utiliser Better Use Perm, car nous allons avoir besoin de l'identifiant. Donc, une fois que l'utilisateur a cliqué sur les détails, donc si vous cliquez sur les détails, vous pouvez voir que nous avons besoin de cet identifiant, d'accord ? Nous pouvons donc l'obtenir avec l'aide des parents. Et nous avons également besoin de cette action que nous venons de créer dans nos toboggans à cocktails. Nous devons donc accéder au dossier Redux, aux dix fonctionnalités, puis à la tranche de cocktail. Et nous pouvons apporter ce cocktail original. Et nous aurons également besoin d'un sélecteur d' occasion et d'un envoi à partir de React React Redux. Donc, à partir de React Redux, nous devons utiliser l' électoral, utiliser la répartition. Expédiez et vous avez sélectionné. Et encore une fois, j'ai besoin du cocktail et de la charge, en partie à cause de notre restauration avec le coude, nous avons utilisé le sélecteur. Alors, déclarez. Et à l'aide de la touche AB à point thêta, nous pouvons extraire le cocktail et la valeur de l'état de chargement. Et encore une fois, nous devons redéfinir cette chose. Je vais donc simplement copier ceci, cette partie et la coller ici. Parce que encore une fois, nous devons renommer la propriété existante du cocktail parce que ceux qui s'appelaient Luke sont un peu bizarres. Nous devons donc renommer certaines des propriétés existantes de ce cocktail. Vous pouvez donc voir que nous avons tout ce que nous sommes maintenant. Nous allons simplement le renommer, de la propriété existante de ce cocktail que nous allons avoir à nouveau, ce cocktail modifié. D'accord ? Et nous avons enregistré la référence d' Eurydice pet dans une variable d'expédition. Et après cela, nous devons dissiper ce cocktail unique de pages. D'accord ? Cet énorme effet existe donc déjà, et une fois que nous avons l'identifiant, jusqu'à présent, ce que nous pouvons faire, nous pouvons détecter cet identifiant à l' aide de l'utilisation. Donc, quelle que soit l'idée que nous avons d'une URL, nous pouvons détecter où se trouve l'identifiant à l' aide d'un énorme schéma et cet énorme animal de compagnie ne fonctionne qu'une fois que nous avons l'identifiant. Nous pouvons donc envoyer un seul cocktail et nous pouvons simplement fournir la pièce d'identité, d'accord ? Et vous pouvez constater que cette idée prend de ampleur ici lors de notre premier single cocktail action. Revenons donc au fichier js single cocktail dot. Et encore une fois, nous devons écrire un autre effet d'utilisation. Cet énorme effet ne se produira que lorsque nous aurons l'identifiant. Et puis, d'accord, et là encore, nous allons vérifier la durée du cocktail. D'accord ? Donc, si vous avez de la valeur, cela signifie que nous allons prendre la durée du cocktail. Et s'il est supérieur à zéro, et cela signifie que nous avons le cocktail, cocktail dans notre objet local. Ensuite, nous allons abandonner la structure. Une partie du truc. Nous allons dicter la hauteur de la propriété à partir de ce cocktail, cette zone à cocktails avec l'Italie, contenir la seule zone d'objet avec, parce que cela, parce que cette erreur de cocktail sera uniquement responsable l' affichage des informations sur le cocktail unique. Cela ne contiendra donc qu' un seul objet de zone. Donc, ce cocktail, nous pouvons atteindre l'indice zéro parce qu'il tiendra bon, car il ne contiendra qu' une seule zone de l'objet. Et on peut imaginer un truc comme STR, boire. D'accord ? Et nous pouvons le renommer par son nom. D'accord. De même, je vais renommer, hum, la propriété de l'adjectif. D'accord ? Donc je vais juste payer toutes ces choses ici. Je vais renommer toute la propriété comme FTR, drink that, drink. Pour envoyer un e-mail directement ou un alcoolique à des informations. Donc, tout cet objet immobilier existant d'un jour nommé ici. Et nous allons également utiliser cet ingrédient. Jusqu'à présent, ingrédient, ce que nous devons faire. Nous devons donc définir un nouvel ingrédient. Donc ingrédient, ingrédients. Et ce sera le tableau. Et à l'intérieur, nous allons avoir tous les ingrédients. D'accord ? Donc, comme les ingrédients STR, je vais les définir un par un. D'accord ? Et après cela, nous allons avoir dans le nouveau cocktail, d'accord, ce que l'on appelle un nouveau cocktail, avec le nom, l'image, l' image corporelle dans la catégorie complète. Mettons-les donc dans cette catégorie. Ensuite, nous en aurons dans le verre. Dans le verre, puis les instructions, les ingrédients. D'accord. Ensuite, nous pouvons faire comme ça, transformer le cocktail en un nouveau cocktail. Et si vous n' avez pas les cocktails, faites-le simplement pour annuler le cocktail. D'accord ? Donc, cet effet énorme ne se produit qu'une fois que nous avons un identifiant et quelques informations sur le cocktail, d'accord ? Et là, nous devons vérifier. Si nous n'avons pas de cocktail modifié. Cela signifie que nous pouvons rentrer. Bonjour. C'est sympa de taguer ici. Ainsi, pour le nom de classe, la section, le trait d'union, le titre. Et nous pouvons donner une description de la vie, pas de cocktail à exposer. Ce que nous pouvons faire ici. Nous pouvons donc simplement supprimer celui-ci. Nous n'avons pas besoin de celui-ci. Et à l'intérieur, nous allons rentrer. Sinon. Finissons la structure à partir du cocktail modifié. À partir d'un cocktail modifié, nous avons besoin d'un nom, d'une image, d'une catégorie en verre plein. Instructions et ingrédients D'accord ? Et ici, nous pouvons revenir en arrière, disant que nous pouvons d'abord utiliser le fragment. Et nous pouvons vérifier s' il y a un chargement. Ensuite, je vais afficher le spinner. D'accord ? Nous allons donc utiliser le div avec le nom de classe spinner grow. Et elle aura un rôle doté de ce statut. D'accord ? Et à l'intérieur, nous allons utiliser la balise span avec le nom de la classe avec Willie masqué. Nous pouvons vous donner un rechargement en direct. Les trois points. Ici, nous allons afficher toutes les informations sur ce cocktail en particulier. Maintenant, nous allons avoir la balise section avec le nom de la classe, fiction, cocktail, trait d'union, élection et tout le style avec ce nom de classe que j'ai déjà défini dans notre fichier CSS à points d' index. D'accord ? Vous pouvez donc voir que vous n'avez pas à vous soucier de ce fichier CSS car j'ai déjà fourni le lien vers tous les fichiers CSS que j'ai utilisés dans cette application. À l'intérieur, nous allons avoir cinq liens. D'accord ? Donc, ce lien a essentiellement le bouton Revenir en arrière. Et nous voulons utiliser le bouton, la couleur du bouton. Et nous allons utiliser un bouton avec le nom de classe btn, hyphen danger. Et nous pouvons donner un style en ligne. Donc, marge, top. Et ce sera la valeur du bouton, sera le retour en arrière. D'accord ? Et après ce lien, nous aurons la balise H2 avec le nom de la classe. Titre de la section. D'accord. Eh bien, il y aura un nom dans le nom et nous allons avoir un autre nom de classe avec la boisson. En plumes. Je vais utiliser la balise image, source. Ici, nous n'utiliserons que le courrier électronique. Chez l'adulte. Nous allons utiliser le nom. D'accord ? Ensuite, nous allons avoir le div avec le nom de la classe et apporter des informations. Ensuite, nous allons utiliser la balise p. Ensuite, nous allons utiliser une balise span avec le nom de la classe, drink, I open data. Et c'est un peu le nom. D'accord. Et je suis content que nous ayons trouvé le nom. Ce truc va donc être répétitif. Je vais donc juste copier cette balise p quelques fois. Alors, faisons des copies pour gagner du temps. Ce sera donc la catégorie. D'accord ? Nous pouvons donc utiliser cette catégorie. Ce sera l'entrée. Ce sera donc informel et ce sera le verre. Donnons un verre ici. Et après cela, nous aurons également de la traction. Ce sera l'instruction. D'accord ? Et dans l'ensemble, nous allons exposer les ingrédients, d'accord ? Ce seront donc ingrédients un peu différents , OK. Et retirons celui-ci. Parce que les ingrédients, le fait d'avoir ça. D'accord, vous pouvez voir que nous avons des ingrédients dans la gamme. Donc, ce que nous pouvons faire ici, nous pouvons l'utiliser pour cartographier, d'accord ? Donc des ingrédients, pas une carte. Nous pouvons avoir un article et un index. Et nous pouvons simplement retourner l'article. Ensuite, nous allons utiliser le temps de bronzage. La clé. Si vous n' avez aucun ingrédient, oui, je vais juste renvoyer le zéro. Et pourtant, je vais vous présenter tous les ingrédients pour cette fois. Nous pouvons donc utiliser cet article et vous devez également fournir la clé. Donc, ici, je vais utiliser la profondeur. D'accord ? Je pense donc en avoir assez de ce cocktail unique et je pense que nous n'utilisons pas l'image. Alors, où se trouve la balise d'image ? Bon, alors voici l'image. Mettons donc à jour celui-ci. Nous en avons donc terminé avec ce cocktail unique, et passons au navigateur vérifier si cela fonctionne ou non. Cliquons donc sur le détail. D'accord, nous avons donc acheté cette propriété non définie qui ne peut pas être lue. D'accord ? Alors, ce que nous pouvons faire ici. Passons donc au navigateur. Passons d'abord à l'obligation religieuse, puis cliquons sur le détail. Alors maintenant, vous pouvez voir que nous avons obtenu ces ingrédients, OK. Et voyons également les autres ingrédients. Vous pouvez donc également cliquer sur celui-ci. Vous pouvez voir que nous avons inscrit cette catégorie de noms pour le verre, dans les instructions, les ingrédients, toutes ces informations sur ce cocktail en particulier, d'accord ? 27. Application de cocktail du projet 2 - Chercher le cocktail: Ensuite, nous allons travailler sur l'hydrogène, le cocktail et les guides. Nous avons déjà travaillé un peu sur notre composant de saisie de recherche. Complétons donc ce composant de saisie de recherche. Revenons donc au code de Visual Studio. Donc, d'abord, nous allons devoir écrire l'action dans notre fichier cocktails live dot js. Copions donc celui-ci. Renommons celui-ci. Ce sera donc le champ de recherche Fetch. Et renommons celui-ci. D'accord, nous devons également modifier cette API. Donc, cette fois, nous allons récupérer le troisième composant. Donc, recherchez du texte et nous devons modifier cet APA. Je vais juste coller l'API requise pour rechercher les cocktails. Nous allons donc utiliser cette API, l'hydrogène, le cocktail. Et nous devons à nouveau définir trois cycles de vie prometteurs dans notre réducteur. Je vais donc simplement copier ces trois. D'accord ? Et collons-le ici. Et renommons celui-ci en cocktail de phages, d'accord ? D'accord. Et nous allons mettre à jour l'état des cocktails, d'accord ? Parce que c'est possible, car cela peut donner lieu à plusieurs cocktails avec cette valeur hiérarchique. D'accord ? Nous allons donc utiliser des cocktails JD Dot et nous devons à nouveau cibler uniquement les boissons. D'accord ? Nous en avons donc terminé avec la logique de notre diapositive de cocktails, fichier dot js. Passons donc au fichier d'entrée de recherche dot js. À l'intérieur de celui-ci, nous allons avoir touché Font submit. Lors de la soumission. Vous allez avoir au sommet du manche. Et définissons rapidement cette poignée. Et certains d'entre eux recevront l'événement. Cela n'aura qu'un seul point E pour empêcher le défaut, d'accord ? Et nous devons définir le changement. Inchangé, la poignée changera également pour trouver celui-ci. Gérez donc le changement ce changement géré et ce changement géré. Nous allons avoir cette stratégie. C'est-à-dire, puisque nous utilisons l'utilisateur. Nous pouvons donc obtenir une valeur comme une valeur actuelle de 30 points. D'accord ? Et nous devons apporter la première action que nous avons créée dans notre fichier Cocktail Slides Dot JS. Nous devons donc revenir aux fonctionnalités du dossier de rédaction, la vie des cocktails, et nous devons apporter cette action, quel cocktail de recherche. Et nous en aurons également besoin ici. Vous allez envoyer depuis notre React React React pour dénigrer l'action. abord, avant d' expédier l' action, j'ai dû stocker la référence de l'énorme disparité dans la variable d'expédition. Et ici, nous pouvons expédier, d'accord. Alors page et nous pouvons dissiper les touchés. D'accord. Et nous devons également investir un peu plus dans notre fichier index.js. Et nous appelons parfois, si vous n'obtenez pas le cocktail en fournissant la valeur de la recherche en termes de fréquentation, alors vous devez afficher du contenu. D'accord ? Nous allons donc d'abord entrer dans le fichier index.js. Fichier Index.js, dans lequel nous supprimons toute la liste des cocktails. Nous devons donc revenir à cet élément de la liste des cocktails. Et là, nous devons vérifier, comme si nous n'avions pas de cocktails. D'accord ? Ensuite, revenez simplement avec certaines méthodes. Comme si la méthode serait « non, correspond à tes critères », d'accord ? Et nous pouvons vérifier si celui-ci fonctionne ou non. Revenons donc au navigateur. Actualisez cette application. Let's Think t'a donné le nom de cocktail Adam. Vous pouvez voir que nous n'avons obtenu que le cocktail avec le mot clé Adam. Et vous pouvez également consulter les informations sur ce cocktail en particulier. Et le retour en arrière fonctionne également. 28. Projet 3 Panier - Démo d'applications: Bonjour à tous et bienvenue cette section dans laquelle nous allons apprendre comment effectuer toutes sortes d'opérations de panier avec la boîte à outils de lecture de l'application React. Et nous allons également utiliser Redux persist here avec une boîte à outils 3D pour conserver la valeur des articles du panier. Chaque fois que vous reformulez l'application, la valeur sera en soi. Faisons donc une démonstration rapide de cette application, laquelle nous allons travailler dans cette section. Voici donc notre panier d'achat. Et si vous augmentez la quantité, vous pouvez voir que le total est mis à jour ici. Et la communauté de notre cartilage est également mise à jour. Ainsi, tout est mis à jour. Chaque fois que vous mettez à jour la quantité et que vous la diminuez. Cela fonctionne donc également. Vous pouvez voir que le nombre de nos cartes est en train d'être mis à jour et que ces cartes indésirables sont également mises à jour. Vous pouvez également supprimer le produit du panier. Donc, en cliquant sur cette icône, cet article sera supprimé de notre panier. Et le montant total sera mis à jour, et la quantité sera également mise à jour. Vous pouvez également supprimer l'article de cette carte si vous cliquez à nouveau dessus, car nous n'avons qu'une seule quantité. Et si vous cliquez à nouveau sur cette flèche vers le bas, cette façon également, elle sera supprimée de cette voiture qui l'a prise. Et vous pouvez également vider le panier en cliquant sur ce bouton. Vous pouvez voir que notre logiciel a maintenant encodé l'entrée t. Et si vous vouliez récupérer tous les éléments, votre projet cliquez sur ce bouton. Et encore une fois, vous pouvez effectuer la même opération, comme augmenter la quantité ou la diminuer. Et toutes ces valeurs seront mises à jour. Nous allons donc écrire une réaction redox différente à l'aide de la boîte à outils Frieda. Et nous allons également conserver l'intégralité de la carte d'achat. Donc, si vous actualisez cette application, vous pouvez voir que notre panier est persistant ici, donc persistant, nous utilisons le pourcentage Redux. Vous allez donc également apprendre à utiliser Paradox Persist avec la boîte à outils de l'éditeur dans cette application React. Voici donc l'application globale que nous allons créer dans cette section. Je vais donc vous voir dans la prochaine vidéo où nous allons configurer notre produit cardiaque. 29. Projet 3 Panier - Configuration: Les gars, je vais créer un projet ici. Je suis donc dans ce répertoire. Je vais donc ouvrir un terminal. Et créons un projet et l'application Vx Create React. Et le nom de mon projet sera panier. D'accord. Ce sera donc le nom de mon projet. Et attendons la création du projet. Il faudra environ deux à 3 minutes pour terminer ce processus. Alors je reviendrai. Une fois ce processus terminé. Enquêtes, la configuration de notre projet est maintenant terminée. Passons donc d'abord à ce dossier qu'est le panier d'achat. Et nous devons installer certains packages avant de commencer à travailler sur cette application. Nous allons donc utiliser le kit d'interface utilisateur MDB React. Pour travailler sur notre composant. Nous devons rédiger la boîte à outils. Nous avons également besoin de React React Redux. Nous avons également besoin du redox. Et nous avons également besoin que vos conduits persistent, car nous allons conserver notre article du panier. Attendons donc l'installation du package et je reviendrai un douzième du package installé. Alors les gars, notre pipette à cortisol. Alors allons-y d'abord. Et Kenneth Clark et moi avons déjà ouvert ce projet dans mon code Visual Studio. Passons donc au VS Code. Vous pouvez voir que j'ai ouvert le projet dans mon code VS. Nous avons donc installé ces packages. Toolkit, React, Redox, Redox Persistent et MDB réagissent à vous. Je pourrais. Et notre application est en train de se charger dans le navigateur et dans notre projet et a été chargée avec succès dans le navigateur. Passons maintenant au VS Code d'abord. Et faisons d'abord un peu de ménage. Nous n'avons donc pas besoin de celui-ci. D'accord. Et donnons pour l'instant le panier, d'accord. Nous n'avons pas besoin de ce logo, allons donc supprimer celui-ci. Supprimons ce fichier. Mettons notre fichier index.js et ici c'est bon. Et créons un fichier et un dossier. Nous allons donc avoir un dossier Redex. Et nous allons avoir un dossier ici. Nous allons donc avoir la barre de navigation NodeJS. Nous allons avoir une barre de navigation, un conteneur de cartes. Et nous allons avoir notre article et insérer Redux. Nous allons avoir un magasin sur une route à péage. Et vous allez avoir une fonctionnalité de dossier. Dans la partie intérieure, nous allons avoir nos diapositives. Nous avons affaire au chariot, donc ce sera Slice, slice point j. D'accord ? Passons au fichier app.js et vérifions si cet acouphène reflété ou non. Puisque nous utilisons ici un Bootstrap de conception matérielle. Nous devons donc apporter un fichier CSS pour notre onglet Material Design. Je vais coller l'instruction d'importation CSS ou le contenu n'a pas été déplacé dans le club. Donc celui-ci, nous devons le coller ici. Maintenant, si vous allez dans le navigateur, vous pouvez voir que cela s'appelle modifier. Cela signifie que nous avons réussi à configurer Material Design Bootstrap dans notre application. 30. Projet 3 Panier - Configurer RTK: Maintenant, je vais configurer la boîte à outils de lecture dans cette application. Ensuite, nous allons commencer à travailler sur ce composant qui est le conteneur de cartes d' identification des articles du panier dans la barre de navigation. Je vais donc commencer à configurer la boîte à outils de rédaction dans cette application. Passons donc au fichier cart slash dot js. Et vous devez apporter une vie créative. Réduisez la boîte à outils, créez des diapositives. Nous en avons besoin. Ensuite, nous avons prédéfini notre tranche, tranche. Trancher. Nous sommes un nom prédéfini, ce sera donc une carte. D'accord ? Ensuite, nous devons définir l' état initial de notre application. Je vais donc avoir des objets. Donc, en gros, il y aura tout le produit. Je vais donc choisir une panne de données dans le dossier source. Donc, ce fichier de données dont nous avons besoin ici sous cette source, d'accord. Il contient donc quatre produits avec titre, prix et montant. Donc, au départ, je fixe la quantité à un. Voici donc la quantité. D'accord ? Passons maintenant aux cartes comme au fichier JS et nous devons apporter le fichier de données ici. Nous importons des données et nous pouvons assister à celle-ci. D'accord ? Donc, au départ, nous allons passer au quatrième produit de notre page, après cela, nous aurons la quantité totale, d'accord ? Ce sera zéro au départ et le nombre total. Ce sera également zéro. Et nous allons avoir un réducteur à l'intérieur duquel nous allons écrire notre réel. Dans un premier temps, ce sera de l'empathie. Exportons cette diapositive. Valeur par défaut d'exportation. Tranche le chariot, a appris à lire et a dit : OK. Passons maintenant à ce fichier store dot js. Et voilà, nous devons apporter votre porte de garage demain. Boîte à outils de rédaction. À partir de la boîte à outils de rédaction, nous devons apporter un magasin configuré. Maintenant, nous devons également utiliser notre réducteur de chariot à partir de cette fine tranche de cartes pliée. Après cela, nous devons essentiellement exporter notre boutique. Donc, les cônes configurent le magasin. Et nous allons avoir un réducteur. Nous allons donc accéder à l'état que nous avons défini dans ces cartes légères ou dans un fichier JS avec la carte-clé. Nous allons donc attribuer ce chariot, le réduire à la voiture. La configuration de notre boutique est donc terminée. Et maintenant, nous devons en juger pour cette boutique, la boutique d'exportation par défaut. Et la dernière étape, nous devons effectuer une configuration dans notre fichier index.js. À partir de React Redux, nous devons d'abord faire passer le fournisseur. Faisons donc appel à un fournisseur afin de connecter notre application React à redex. Et nous pouvons simplement mettre ce composant d'application, en fait ce fournisseur. Et nous devons également organiser cette visite. Passons à ce dossier. Et nous pouvons fournir cet historique à notre fournisseur. Sauvegardons ce fichier et vérifions si notre lecteur, liquidus, nous permet de le configurer complètement ou non. Passons donc au navigateur. Nous n'avons eu aucune erreur. Cela signifiait donc que deux liquidus étaient correctement configurés. Vous pouvez également vérifier avec la réduction ductile, si vous avez un grand DevTools dans votre extension Chrome. Si tu ouvres celui-ci. Vous pouvez maintenant voir que nous avons notre état initial. Vous pouvez voir que nous avons un produit à l'intérieur de cet article. Alors d'accord, cela signifie que nous avons correctement configuré notre boîte à outils dans cette application React. partie de configuration de la boîte à outils Reduct est donc encore terminée. Nous allons maintenant commencer à travailler sur les composants un par un. Nous allons donc d'abord commencer à travailler sur notre fichier .js de la barre de navigation. 31. Projet 3 Panier - Navbar: Je vais maintenant commencer par ce composant de la barre de navigation. Donc, c'est moins qu'un extrait dendritique fourni ici. D'accord ? Et dans app.js, nous allons avoir notre composant Navbar et notre conteneur de cartes. D'accord ? Travaillons donc sur celui-ci et nous pourrons apporter notre numéro avec compétence uniquement. Sauvegardons d'abord ce fichier. Ensuite, nous pouvons apporter cette barre de navigation. Le code VS importe donc automatiquement ce composant. Vous pouvez vérifier celui-ci. Vous pouvez donc voir que cela fonctionne. Passons maintenant à ce composant voisin. Et ici, nous devons apporter un composant de notre bootstrap de conception matérielle de MTV React UIKit. Nous devons apporter une MDB, un conteneur MDB, MDB, un lien vers la barre de navigation, une MDB, une marque de barre de navigation, un badge MDB. D'accord ? Nous avons donc besoin de tous ces composants. Après cela, ce que nous devons faire. Nous devons donc également nous apporter un sélecteur et une énorme expédition de notre réaction à la prochaine étape. Apportons-les d'abord. Nous avons déjà défini l'état initial à l'intérieur de ce panier. Nous pouvons donc traiter cet état, d'accord ? En troisième lieu, notre fichier .js de la barre de navigation. Donc, à l'intérieur de la barre de navigation, nous avons un sac de chariot sur le dessus, à droite. OK, donc nous en avons deux. Donc le décompte total. Nous pouvons donc lire la valeur du statut à l' aide d'une grande sélection. Et nous avons exploré le réducteur avec la carte-clé. D'accord ? Nous pouvons accepter que l' État apatride soit pris au piège. Et nous pouvons saisir le décompte total. À partir de maintenant, ce ne sera que zéro. Travaillons donc sur ce composant de la barre de navigation. Je vais utiliser un fragment ici. Et je vais utiliser le numéro IMDB. Et ici, il sera agrandi. Allergie couleur foncée. Je vais te donner le primaire. OK. En troisième lieu se trouve le numéro IMDB. Je vais avoir un conteneur IMDB. Et puis nous aurons la marque de barre de navigation IMDB, d'accord ? Et ici, nous pouvons donner comme une carte d'achat Redox Toolkit. OK. Et en thérapie, nous devons les transmettre. En ce qui concerne le style, je vais donner un style comme une ligne. L'article sera centré. Faisons un affichage. Donnons de la flexibilité à l'affichage et justifions l'espace entre les contenus. Sauvegardons ce fichier et nous pourrons vérifier ces modifications. Vous pouvez donc voir que nous avons celui-ci, notre belle barre de navigation. Ensuite, nous aurons MDB, maintenant Berlin. Et puis je vais utiliser ici une balise avec le nom de classe MX, tiret trois. Avec l'Italie, j'utilise ici le nom de classe bootstrap. Et nous pouvons avoir une icône MDB. Et je vais utiliser les icônes Font Awesome. Je dois donc mettre une feuille de style pour activer Font Awesome. Cet état de faîtage est donc nécessaire pour activer un torse. Et à l'intérieur de cette icône MDB, nous allons avoir MDB mal. OK, profitons de l'icône MDB de Faraday. Nous utilisons donc l'icône Font Awesome. Et je peux m'équiper pour échanger des cartes ici. D'accord ? La taille sera grande. Et la couleur que je vais utiliser ici, tout de suite. Maintenant, à l'intérieur se trouve la valeur MDB. Nous devons fournir cette goutte. La couleur sera le danger qui augmentera le rouge. Notification, désolé, ce sera même une notification. Et nous devons donner une partie de chaque carrelage à l' intérieur. Et je vais donner une taille de police de 12 pixels. Et nous voilà au moins en train montrer le décompte total, d'accord ? Et nous pouvons vérifier si celui-ci fonctionne ou non. Passons donc au navigateur. Vous pouvez maintenant voir que cela fonctionne. Nous pouvons lire cette valeur nulle dans notre boutique. Et actuellement, nous n' avons aucun article dans le panier, donc il passe à zéro. Notre barre de navigation est donc compliquée ici. Et je pense que cette énorme disparité n'est pas nécessaire. Mais supprimons celui-ci. La partie de la barre de navigation est donc terminée ici. Nous allons maintenant travailler sur le conteneur de notre chariot. 32. Projet 3 Panier - Conception de panier: Je vais donc maintenant commencer à travailler sur ce composant contenant des cartes. Envoyons-en donc un extrait ici. Donc d'abord, nous devons avoir un effet énorme, d'accord ? Et encore une fois, nous avons besoin ici d'une énorme expédition et d'une utilisation sélectionnées partir de notre réaction à cet énorme sélecteur. Expédition habituelle. Et nous avions besoin d' un composant de notre matériel pour ensuite le bootstrap. Le composant dont nous avons besoin ici, MDB, icône MDB. D'accord ? Seuls ces deux experts sont donc tenus d'importer de notre voyage de conception des matériaux. Et voici ce que nous devons faire. Donc, d'abord, nous devons extraire un état que nous avons dans notre système et que nous avons dans notre fichier cart slash dot js. Utilisons ici le sélecteur d'occasion. Et nous pouvons quitter l'État avec une carte à points. Nous avons donc besoin ici des articles et du montant total. D'accord ? Maintenant, ce que nous devons faire. Supprimons donc celui-ci. Je vais être chaque fragment. Et si vous avez les objets, je vais les souder. Alors maintenant, je vais faire ce que je vais faire. Donc d'abord, je vais maintenant utiliser votre balise H2 avec le nom de classe lead hyphen, md, hyphen, md hyphen two. Et je vais vous donner un titre comme votre panier. Maintenant, nous avons quatre produits à l'intérieur de cet article. Je vais donc utiliser ce composant à l'intérieur de ce porte-cartes. Donc, pour l'instant, je vais juste générer un extrait ici. Je travaillerai plus tard. D'accord ? Et ici, nous avons l'objet, donc les objets, l'élément de la carte à points. Et nous pouvons retourner ici l'article de notre panier. D'accord ? Le code VS importe automatiquement ce composant et cette clé. Je vais accéder au chemin et à l'identifiant point de l'article. Et je vais répartir la hauteur vers le bas. Donc, ce point de données matérielles est le prix du titre du contenu. Il l'a créé à Tokyo. Nous allons donc enregistrer ce fichier et allons dans le navigateur pour retourner celui-ci. Ce composant ne dit donc pas que nous devons vraiment accéder à notre fichier app.js et apporter ce composant contenant les cartes. Sauvegardons ce fichier. Passons maintenant au navigateur. Vous pouvez maintenant voir que ce composant du panier est affiché ici. Nous avons donc quatre éléments dans le fichier data dot js. Il s'agit donc d'un rendu temporel. D'accord ? Après cela, nous devons travailler sur ce fichier dot js de l'article du panier. Je vais donc maintenant commencer à travailler sur ce composant du panier. Nous devons donc ici apporter l'effet Hughes. Et encore une fois, nous devons apporter ces deux éléments. Il y a donc deux choses que nous devons apporter. Je vais également l'utiliser ici. Alors, apportons ici. OK, maintenant, supprimons celui-ci. Et je vais utiliser votre style intégré. Je vais donc utiliser ici 70 et la largeur de vue, d'accord ? Largeur maximale, je vais utiliser ici 90, alors ce sera entre guillemets doubles. Je vais vous donner zéro pixel et automatique. Maintenant, dans ce div, je vais avoir un autre div avec le nom de la classe. Emprunter. Encore une fois, je vais avoir, et encore une fois, je vais avoir un style en ligne. Marge. Haut. Ce sera donc dix pixels. OK, formatons celui-ci. Et à l'intérieur de ce div, je vais avoir un autre div avec le nom de la classe. Tout le trait d'union SM le trait d'union à. Ce complexe va recevoir des accessoires parce que nous répartissons tous les objets de cette façon. Il recevra donc ici des accessoires tels que l'identifiant, l'image, le titre, le prix et le montant. Je vais donc utiliser une balise d'image. En troisième réflexion, je peux fournir cette image et, en alternative, je peux fournir votre titre. Je vais utiliser ici à LastName, image fluid. Et le style que je vais utiliser ici, ajustement de l'objet, couverture. Formatons celui-ci. Je vais avoir de la largeur et de la hauteur. Je n'aurai que mon meilleur. D'accord ? Maintenant, après cette cassette, je vais avoir encore une journée avec la colonne Hyphen SM Hyphen Two. Et je vais fournir la marge en guise d'accessoire. Et ici, je vais avoir le tag h5. À l'intérieur, je vais avoir un titre. Vérifions donc celui-ci pour le moment, qu'il fonctionne ou non. Passons donc au navigateur. Vous pouvez maintenant voir que nous sommes en mesure d'afficher l' élément pour avec le titre médian. Maintenant, après cette balise h5, je vais avoir une autre balise h5. Et ce sera le prix. D'accord ? Et là, je vais donner un peu de couleur. Donc, la couleur que je vais utiliser ici a 61, 70, 98. OK, voyons à quoi ça ressemble. Nos prix sont donc encore affichés. Maintenant, je vais avoir une icône ici, une icône MDB. Et je vais utiliser encore une police géniale. Et ce sera le style d' icône de brouillon que je vais donner ici, ce pointeur et cette couleur. Je vais juste te donner un rouge. Et cette MDB, je l'ai convertie avec un système de fermeture automatique. D'accord ? Maintenant, après ce tableau, je vais avoir un autre div avec le nom de classe appelé fn. Je l'ai trouvé. Et encore une fois, je vais utiliser l'IMDB. Mais je ne peux que le faire. Ce sera comme si la flèche montait. D'accord ? Je vais donc l'utiliser ici autour de Chevron. Et nous pouvons supprimer cette couleur qui n'est pas requise ici. Et puis je vais montrer la quantité ici que je vais utiliser la balise p. Et à l'intérieur, je vais partager le montant. Et je vais leur donner une ligne de marge de tuilage, en haut, elle sera de dix pixels. Et après cela, nous allons également avoir une flèche vers le bas pour essentiellement diminuer la quantité d'articles. Et cela augmentera essentiellement la quantité d'articles. Donc, ce sera vers le bas, les chevrons vers le bas. Et je pense que c'est tout pour le moment. Nous pouvons vérifier si celui-ci fonctionne ou non. Passons donc au navigateur. Cela fonctionne donc. Vous pouvez voir que nous avons une flèche vers le haut, une flèche vers le bas, ou que nous encourageons ou dégradons la quantité d'articles. Alors maintenant, nous en avons deux. Donc, le montant total également. Nous devons continuer à travailler sur ce fichier dot js contenant des cartes. Alors après ça, je vais prendre de l'eau. Et nous allons avoir une ligne horizontale. Ensuite, en ce qui concerne le tag. Je vais donc vous proposer le style des millénaires. Ce sera donc comme afficher, adapter et justifier le contenu. Espacez uniformément. Et la marge droite sera de 50 pixels. Et ici, je vais avoir une étiquette de durée totale. Et nous pouvons voir ici le montant total. Et cela sera saisi en D. OK, alors mettons celui-ci dans un div. Cette division, nous allons avoir MDB, btn. Maintenant, dans ce MDP avec lui, je vais leur transmettre des instructions, donc de la couleur. Ce sera un danger. Au clic, nous allons avoir. Nous définirons donc le OnClick plus tard. Donc, pour l'instant, supprimons celui-ci. Et nous allons avoir chaque tuile. Ce sera donc la largeur 1 pour une cellule typique. D'accord ? Et nous allons avoir la marge la plus élevée. Ce sera donc 50 pixels. Le bouton précieux avec une carte transparente. Vous pouvez également retirer tous les objets de la voiture. Sauvegardons donc ce fichier et entrons dans le navigateur. Maintenant, vous pouvez voir que cela fonctionne. Et pour l'instant, la demande est nulle. Celui-ci est également nul car nous n'avons défini aucune action pour mettre à jour toutes ces valeurs. D'accord ? Nous allons donc maintenant commencer à travailler sur chaque hydrodissection pour augmenter ou diminuer la quantité ou retirer l'article du panier. Ou si vous souhaitez supprimer tous les articles inclus dans la carte, vous pouvez également le faire en cliquant sur ce bouton. Nous devons définir l' action pour chaque opération. Jusqu'à présent, je vais écrire une action pour obtenir le total du panier. Nous avons un certain montant pour chaque produit Je voulais donc montrer le total de cette carte. D'accord. 33. Projet 3 Panier - Panier Total Action: Commençons donc à travailler sur notre action de rédaction de la boîte à outils. Je vais maintenant écrire une action dans la boîte à outils pour obtenir la valeur totale des articles du panier. À l'intérieur de ce réducteur. Je vais avoir cette réaction redox. Nous allons donc avoir un maximum et une lumière et obtenir le total du panier, d'accord ? Seul le fait d'avoir un État. Et pourtant, quand définir une variable, les éléments listés. Je vais donc texturer le montant de l'hôtel et le nombre total. Et je vais utiliser la méthode tout en réduisant. Donc, la méthode de réduction avec Italy exécute une sorte d' opération sur tous les éléments du tableau et elle produira une valeur unique basée sur ce tableau. Donc, ici, je vais avoir le total du panier et l'article du panier. D'accord ? Et puis à partir de l'article du panier, je vais avoir ce prix et ce montant. D'accord. Ensuite, le coût de l'article, le prix total et les a tous pris. Je ne fais donc qu'appliquer des mathématiques simples pour calculer la valeur d'un quota plus léger. Et puis chariot. Le montant total est égal à, donc il sera plus égal au total. Et je vais faire la même chose pour notre décompte total. Donc le panier, le total, le nombre total et le montant, d'accord ? Il n'y a rien d' autre que de la quantité, d'accord ? Ensuite, nous pouvons retourner le total. D'accord ? Maintenant, nous devons également fournir la valeur initiale. Donc, le montant total et le total trouvé seront nuls, soit un. Ensuite, nous devons mettre à jour notre montant total et notre décompte total. Supposons que notre montant total soit égal à ce que je joue un rôle en chiffres et que je lui dise de corriger. Je vais donc simplement fixer la valeur du montant total à 22 décimales. Et ça ne l'est pas. Le décompte total est égal au décompte total. D'accord ? C'est donc terminé. Nous devons maintenant exporter cette configuration d'exportation réelle. Et cela indiquera diapositive de la carte, le total réel de la carte. Nous pouvons maintenant utiliser cette action ici dans le fichier dot js du conteneur de cartes. Nous devons donc utiliser à l'intérieur de notre effet d'utilisation. Et il faut d' abord que la référence de l'unité soit divisée en une variable d'expédition. C'est alors seulement que nous pourrons désespérer cet accent. Donc, expédiez, recevez le panier, au total. Le code VS m' a donc automatiquement suggéré cette action de redex. Il sera automatiquement importé. Si ce n'est pas automatiquement important pour vous, vous devez l'importer manuellement. Passons donc au navigateur. Vous pouvez maintenant voir que nous sommes en mesure de voir la quantité totale de ce produit, ce qui est correct. Donc, la quantité totale de produit permet de réduire la fréquence cardiaque. Vous pouvez le voir ici, car au départ, quantité d'articles de notre panier est d'un, d'accord ? C'est donc terminé, d'accord ? 34. Projet 3 Panier -Augmenter, diminuer et supprimer l'action: Maintenant, nous devons définir l'action suivante pour augmenter l'élément actuel. Donc, si vous cliquez sur cette flèche, elle augmentera. Et le prix sera également mis à jour en même temps que la valeur du panier. Définissons donc d'abord l'action pour augmenter la quantité d'articles. Je vais donc définir l' action ici en gris, la quantité d'articles du panier. Donc, ici, je vais avoir augmenté et je vais rester au même rythme que l'action. Et puis je vais avoir un état, des points, des éléments, une carte à points. Je vais avoir un objet. Et nous devons vérifier si l'identifiant de l'article correspond à la charge utile du point d'action. Charge utile. Rien d'autre que ce sera la carte d'identité. Je peux donc indiquer que le parallèle à points contiendra l'idée que nous allons envoyer depuis notre composant. Donc, si ça sent mauvais et qu' il ne reste à augmenter la quantité, d'accord ? Donc, dans ce cas, ce que nous devons faire, un retour, je vais juste étaler l'article et nous devons simplement mettre à jour le montant de l'article point m plus un. Et nous pouvons retourner l'article. C'est donc calculé. Nous devons maintenant lancer cette action. Donc, exportez celui-ci en fichier. Et nous pouvons utiliser celui-ci dans le fichier dot js de notre panier. Encore une fois, nous nous rapprochons de la différence entre la division habituelle en une variable d'expédition. Ce n'est qu'alors que nous serons en mesure d'envoyer une action. Voici donc Chevron Up. Cela signifie que nous pouvons augmenter la quantité d'articles, le seul clic que nous devons fournir ici. Et je vais dissiper cette augmentation de l'epsilon. Donc, le code VS suggère automatiquement avec cette action. Et je vais transmettre la pièce d'identité que je reçois et les autres accessoires provenant de notre composant contenant des cartes. Sauvegardons ce fichier et passons au navigateur. Rafraîchissez celui-ci. Maintenant, si nous augmentons celui-ci. Vous pouvez donc constater que cela augmente, mais notre nombre de cartes et ce nombre de cartes ne sont pas mis à jour. Donc, ce que nous devons faire, c'est essentiellement apporter quelques modifications à notre effet de réutilisation. Cette action sera donc toujours expédiée chaque fois que nous aurons des modifications de quantité. Nous pouvons donc transmettre les éléments de cette dépendance. Donc, chaque fois que des modifications se produisent dans le tableau des éléments, cela sera déclenché, d'accord ? Et nous obtiendrons la valeur totale mise à jour de l'article ainsi que la quantité totale. Allons donc dans le navigateur et actualisons celui-ci. Maintenant, augmentons la quantité. Donc, comme vous pouvez le constater, il est en cours de mise à jour. Et pourtant, il a également été mis à jour à cinq. Vous pouvez voir qu'il est en cours de mise à jour. Maintenant, nous allons essentiellement implémenter la fonctionnalité permettant de supprimer le produit de ce panier. Maintenant, dans la section suivante, nous allons essayer de supprimer le produit de notre panier. Nous pouvons donc l'essayer ici en fait. Nous allons donc supprimer et nous allons avoir un état et une action. Et indiquez les points et les objets du lot. Filtre à points. Nous allons avoir votre article. Et nous devons écrire ici une logique de base, comme si l'identifiant par points de l'article ne correspond pas à l'idée que nous recevons du composant, alors nous devons conserver tous ces articles et retirer ces articles particuliers de la carte d'achat. Cela filtrera cet article et sortira carte d'achat. Et exportons celui-ci. Maintenant, nous pouvons utiliser cette action dans fichier dot js de notre panier. Nous allons donc avoir onclick. Nous pouvons simplement expédier celui-ci. Supprimez automatiquement le code VS suggéré dans cette section. Et nous pouvons transmettre la carte d'identité. Passons au navigateur. Celui-là. Et si vous cliquez sur cette icône de suppression, sera supprimée, la valeur du panier sera mise à jour. La quantité de ce panier d'achat est également mise à jour. Cela fonctionne donc. Tu peux le voir. Maintenant, la prochaine étape consiste à travailler essentiellement sur notre quantité réduite. Nous devons donc travailler sur cette fonctionnalité. Donc, si vous cliquez sur cette flèche vers le bas, la quantité diminuera. Et si vous n'avez qu'une seule quantité, et si nous cliquons à nouveau dessus, la flèche vers le bas, elle sera supprimée de notre panier. Nous devons donc également nous occuper de ce truc, d'accord ? Maintenant, je vais l'écrire, ça irrite l'accent en diminuant la quantité. Je vais donc juste copier celui-ci. D'accord ? Elle sera quasiment identique. On remonte le niveau de kérosène. Elle sera diminuée. Et cette fois, nous voulions réduire la quantité si l'identifiant correspond. Et nous voulions également faire une dernière chose. Par exemple, si vous n'avez qu'une seule quantité et que vous cliquez à nouveau sur cette flèche vers le bas, elle sera supprimée de notre panier. Donc, ici, nous pouvons faire comme si nous étions filtrés, d'accord ? Et nous pouvons vérifier ici. Si je tourne le point entre deux points, ce n'est pas égal à zéro. Cela signifie que s'il devient nul, il sera supprimé de notre panier. Supposons que vous supprimiez celui-ci. Tapez partout où ils exportent celui-ci. Utilisons cette action dans ce fichier dot js de l'article du panier. Nous pouvons donc utiliser OnClick ici. Il sera donc diminué. Le code suggère à nouveau automatiquement sans action. Et je vais vous transmettre la carte d'identité. Et nous devons essentiellement nous frayer un chemin à l'intérieur de la dépêche. OK, donc je vais juste couper celui-ci. Et je vais me placer en troisième position et expédier. Alors seulement ça marchera. Passons au navigateur. Rafraîchissez celui-ci. Incluons celui-ci. Déterminons celui-ci. Cliquez sur celui-ci. Il est en train d'être mis à jour. Cela dictera également la mise à jour. Et si vous cliquez à nouveau, cet article sera supprimé de notre panier. Cela fonctionne donc également. De cette façon. Vous pouvez également supprimer des objets de la carte à échanger. Ils travaillaient tous les deux. Ils disent que c'est fait. Nous devons maintenant travailler sur cette carte claire. Si vous cliquez simplement sur cette carte transparente, tous les éléments seront supprimés. 35. Projet 3 Panier - Action vide: Maintenant, je vais écrire une carte de données d'entrée à barres de fractions, d'accord ? Il peut donc avoir une carte claire et claire. D'accord ? Eh bien, ne pas avoir d'état et d'état points à deux. D'accord. Exportez cette action. Carte si claire. Et nous avons ce bouton à l'intérieur de notre boîte à cartes. D'accord ? Nous pouvons donc avoir une méthode onclick et afficher cette carte d'action en clair. D'accord. Encore une fois, le code soviétique m'a automatiquement suggéré cette réaction redox. Sauvegardons ce fichier et entrons dans le navigateur, lisons et vérifions celui-ci. Celui-ci, cliquez sur cette carte transparente. Maintenant, notre fête cartésienne, et si le chariot est vide, alors je ne veux pas qu'il en soit ainsi, d' accord, alors j'ai voulu me baigner. Je dis « comme votre panier » dans la saisie. Nous pouvons donc vérifier ici que si la longueur des points des articles est égale à zéro, cela signifie que nous n'avons aucun article dans le panier. Dans ce cas, je voulais renvoyer comme si votre top encodé l'entrée t. Je vais utiliser la balise h3 avec le nom de la classe. Et je vais avoir plus de classe tout en ayant une certaine marge de manœuvre. Les quatre premiers, d'accord ? Et nous pouvons vous donner comme si vous aidiez. Et je vais utiliser ton icône. Je vais généralement être Span Tag. Et je vais avoir une icône MDB. Et puis troisièmement, je peux, je vais utiliser une icône. Et je pourrais être comme faire du shopping chez Heisenberg. Et après cette balise span, je vais sélectionner l'entrée D. Vous pouvez voir que nous sommes en mesure de voir cette méthode. Et je me suis demandé d'ajouter un bouton ici pour obtenir tous les éléments de la carte. Donc, si vous souhaitez jouer davantage avec cette application, vous pouvez également repartir de zéro en ajustant toutes les cartes d'Irish Toe. Nous pouvons donc avoir un bouton ici après cette balise h3. Donc MDB, btn. Et ce sera d'avoir de bons articles pour les jambes. Et le nom de la classe. Je vais aussi vous donner un trait d'union mixte. D'accord. Et voyons quoi ressemble notre bouton. C'est bon, OK. Maintenant, nous devons écrire une section de lecture de base pour obtenir tout le panier de notre boutique. Donc, ici, je vais écrire une réaction redox , essentiellement pour obtenir tous les éléments. D'accord ? Nous pouvons essayer de le détecter. Et heureusement, nous pouvons faire comme si un point d'état était égal à des données. D'accord ? Et nous pouvons exporter cette action. Obtenez des articles de carte. Nous pouvons utiliser la détection à l'intérieur de ce fichier dot js contenant des cartes. Et ici, nous pouvons utiliser la méthode on-click. Nous pouvons le dissiper. Expédiez, récupérez des articles de garde. Sauvegardons ce fichier. Et entrons dans le navigateur. Maintenant, cliquons sur cette carte transparente. Quoi qu'il en soit, mes trois amis comme toi s'arrêtent pour trouver un pote. Et si nous cliquons sur cet élément de la grille, vous récupérerez tous les éléments que nous avons dans notre fichier data dot js. Ainsi, vous pouvez également jouer avec cette application. La fonctionnalité est terminée. Vous pouvez voir que tout fonctionne comme prévu. 36. Projet 3 Panier - Persist Cart valeur avec Redux-Persist: La dernière chose à faire est de laisser de côté si vous faites référence à cette obligation. Je voulais donc conserver toutes les valeurs, comme le total, ainsi que cette valeur et cette valeur. Nous allons donc l'utiliser ici pour conserver toute la valeur de la carte. Donc, si vous avez lu celui-ci pour l'instant, il sera réinitialisé. Nous voulions donc terminer la valeur de la carte. Nous allons donc utiliser root x, passer à la boîte à outils du lecteur. Alors les gars, maintenant je vais le configurer. Les rejets persistent dans cette application React. Donc, ce que je peux faire ici, d' abord apporter un espace de rangement. Nous avons donc déjà installé ce package au début. Et nous avons également besoin d'un nombre de réducteurs qui persiste. Maintenez un réducteur. Et nous avons besoin d'un combinateur, d' un réducteur issu de notre redox. Nous combinons donc cela aujourd'hui de Madrid x. Maintenant, nous devons écrire ici : persistance de la configuration, persistance du conflit. Nous devons vous donner un rôle clé dans la première version. Et nous avons un stockage en deux parties. Nous devons maintenant utiliser ce réducteur combiné. Le réducteur est égal à la gomme combinée. Et nous pouvons être réglementés par carte, celle-ci. Et vous pouvez le coller ici. D'accord ? Ensuite, vous devez utiliser notre réducteur. Le réducteur persistant est donc égal au réducteur persistant. Nous devons transmettre la configuration, cette configuration, puis nous devons emballer le réducteur. Et ici, nous pouvons utiliser celui-ci. D'accord ? Maintenant, nous devons également effectuer quelques ajustements dans ce fichier index.js. Donc, voici ce que nous devons faire, donc à partir de Redex Persist, devons créer un magasin Persist. Et nous devons également importer, persister ET Gate. Test Redux PR. Nous devons passer à l'intégration et réagir. Et ça va persister. Maintenant, après cela, nous choisissons de l'utiliser, mais cela peut arriver Nous devons emballer notre composant avec le portail AND acheté, puis persévérer. Et ici, nous devons utiliser LED pour accéder au magasin. Et nous pouvons en passer en voici deux. D'accord ? Et nous pouvons fournir tout en pratiquant. Nous allons donc enregistrer ce fichier et vérifier celui-ci dans le navigateur. Rafraîchissez celui-ci. Nous n'avons donc aucun problème. Nous allons donc effectuer toutes les opérations. Cela fonctionne donc. Total est donc en train d'obtenir des détails. Celui-ci s' améliore également. Maintenant, je vais actualiser cette application. Vous pouvez donc voir qu'après le remplacement, notre valeur r persiste ici. La valeur totale est donc également conservée. La quantité persiste également et quantité totale dans la voiture persiste également. Nous avons donc réussi à conserver la valeur de la carte dans cette application. J'espère maintenant que vous avez compris la fonctionnalité du panier d'achat à l'aide de la boîte à outils Verita dans cette application React. 37. Application de blog Project 4 - Démo: Dans cette section. Tout d'abord, nous allons aborder un concept de base du kit d'outils Redux en créant cette application de blog simple dans laquelle l'utilisateur peut publier un blog ou l'utilisateur peut aimer ou ne pas aimer un blog en particulier À l'aide de cette application, vous aurez une idée de base sur la façon de travailler avec le kit d'outils Reduct dans une application React Pour ce projet, nous allons utiliser un code de démarrage afin de créer cette application à l' aide du kit d'outils Reduct Je vous retrouve dans la prochaine vidéo où je parlerai du code de démarrage. Je vais également vous donner un bref aperçu du code de démarrage que nous allons utiliser dans cette section. C'est tout, extrait de cette partie d'introduction. Je vous verrai dans la prochaine vidéo. 38. Application de blog Project 4 - Aperçu du code: Les gars, il est temps de commencer à travailler sur notre tout premier projet avec Red Tool Kit. Dans cette force pour ce projet que nous allons construire, kit Redo, j'ai fourni un code source qui est joint à cette conférence Vous pouvez trouver le code source de ce projet de démarrage avant passer à autre chose et d'écrire du code, laissez-moi vous donner un bref aperçu de ce code de démarrage. J'ai créé ce projet en utilisant ce modèle de réduction. Vous n'êtes pas obligé de faire cette étape. J'ai déjà fourni le code source joint à cette conférence. Revenons au code VS. Vous pouvez voir que j'en ai un en dossier. J'ai également utilisé ici bootstrap, afin d'éviter d' écrire du code CSS Sur le côté gauche, nous avons un formulaire de bloc à partir duquel nous pouvons publier notre blog. Sur le côté droit, je fais le rendu de la liste des blogs soumise par ce formulaire de blog. Pour le moment, nous n'avons qu'un titre. Si je reviens au navigateur, vous pouvez voir que sur le côté gauche, nous avons un formulaire de bloc et le côté droit, nous avons une liste de blogs dans laquelle je vais afficher tous les blogs. Revenons à nouveau au code VS. Ici, nous avons un fichier d'index JS. Nous avons une application et des fonctionnalités dans l'application, nous avons une configuration de boutique. Pour le moment, nous n'avons aucun réducteur. C'est vide. Nous avons un dossier de fonctionnalités dans lequel j'ai un dossier de blocs dans lequel j'ai un formulaire et une liste de blogs. D'accord, il s'agit d'un formulaire très basique que j' ai écrit ici pour que l' utilisateur puisse publier le blog. Ici, je viens de vous fournir le code source de ce fichier afin que nous puissions nous concentrer davantage sur l'apprentissage du concept de la boîte à outils rouge. Nous avons ici un formulaire très basique. Nous avons une liste déroulante pour sélectionner l'utilisateur. Nous avons un champ de saisie pour le titre, et nous avons un corps pour notre blog. Maintenant, nous avons également une liste de blogs. OK, donc pour le moment, je suis en train de restituer les deux blocs à partir de ce composant lui-même. D'accord, nous avons également un utilisateur du blog. Nous allons également montrer que ce blog est créé par quel utilisateur ? OK. Pour le moment, c' est tout à fait clair, d'accord. Et nous avons un bouton de réponse ici. En gros, vous pouvez aimer ou ne pas aimer le blog, c'est un composant très basique. Revenons maintenant à ce fichier d'index GS. En gros, nous fournissons le magasin à notre application afin que notre composant puisse accéder à l'état que nous allons définir dans notre boutique. Plus tôt, je vous ai déjà informé que dans ce projet je vais utiliser une version 5 de bootstrap J'ai déjà choisi le CDN ou le bootstrap version 5, afin que nous puissions éviter d' écrire dans ce projet Parlons maintenant de ce package, également du fichier Json. Nous avons ici cette boîte à outils Reduct et React Reduct, qui sont importants pour travailler avec la boîte à outils Reduct dans une J'ai déjà ces deux dépendances. Chaque fois que vous configurez un projet React avec cette commande, chaque fois que vous créez un projet React avec cette commande, vous obtiendrez ces deux dépendances en plus de cela. C'est l'outil React Reduct and Reduct. Tout tourne autour de la vue d'ensemble de ce projet de démarrage en bloc. 39. Application de blog Project 4 - Blog Slice: Commençons maintenant à travailler sur cette simple obligation de bloguer. Tout d'abord, je vais créer une tranche ici qui ressemblera à des blogs. Liz, je vais importer une tranche depuis Red Slide Il est essentiellement utilisé pour définir notre état initial, notre action et notre réducteur. Pour cela, nous créons une tranche, créons une tranche. Ensuite, ce que nous devons faire ici, définir une tranche de blocs. Nous pouvons utiliser cette méthode pour créer une tranche qui ne peut pas être un objet, et nous devons définir un nom de tranche. Je vais donner un nom à une tranche ici, bloc, nous allons avoir l'état initial. D'accord ? Laissez-moi donc définir un état initial ici, uniquement à partir de ce fichier JS de liste de blocs. Je vais juste couper celui-ci, d'accord ? Et je vais juste le coller ici. Permettez-moi de renommer à l'état initial. OK, nous avons trouvé notre état initial, maintenant nous allons avoir un réducteur dans lequel nous allons écrire une action pour le moment, la laisser être caressée Permettez-moi d'exporter ce guide de blocage d'erreurs. Nous exportons ce réducteur. Nous allons connecter ce réducteur dans le fichier Js de notre boutique. OK, permettez-moi de revenir à ce dossier d'applications ici. Je vais apporter ce réducteur de blocs. Réducteur de blocs ici. Nous devons accéder à ce dossier de fonctionnalités et blocs et utiliser ce fichier. Nous pouvons maintenant connecter notre réducteur à cet objet réducteur. Donc, des blocs, nous pouvons donner n'importe quelle clé, celle que vous voulez. Je donne donc des blocs, nous pouvons simplement attribuer des blocs. Réducteur. Sauvegardons ce fichier ici. Tout va bien, je suppose, OK. 40. Application de blog Project 4 - Liste de blog avec useSelector: Passons maintenant à ce fichier de liste de blogs ici. Tout d'abord, je vais apporter un sélecteur de React Reader. Parce que nous devons sélectionner l'état que nous avons défini dans ce blog, les mensonges. Pour cela, nous avons besoin d'un sélecteur Ensuite, nous pouvons avoir nos blogs à sélectionner. Ici, nous pouvons accéder à tous nos blocs à partir de ce bloc d'état car notre réducteur est enregistré avec les blocs clés ici OK, maintenant nous avons tous nos blocs. D'accord, nous utilisons cette fonction de bloc de rendu pour afficher tout le blog. Nous avons le contenu du titre de l'identifiant. OK, utilisateur du blog. Donc, pour le moment, nous n' avons aucun utilisateur principal. OK. Dans cette vie, vous pouvez voir que cela va simplement permettre à l'utilisateur inconnu de bien fonctionner. Nous allons écrire la logique de la lettre d'utilisateur dans ce projet. abord, concentrons-nous sur la location du blog Dans notre application, nous avons obtenu ce blog dans notre boutique et nous le rendons à l' aide de cette fonction. Passons à ce fichier d'applications et supprimons ce titre codé par art, et je vais apporter le composant de liste de blogs. OK, alors laissez-moi enregistrer ce fichier, allons maintenant dans le navigateur. Ici, vous pouvez voir que nous avons obtenu nos deux blocs que nous avons définis dans ce fichier .js de fichiers de blocs. OK, nous avons obtenu ces deux premiers blocs. Cette partie est terminée, où nous avons appris à sélectionner l'état dans le magasin. Cette partie est terminée maintenant. 41. Application de blog Project 4 - Créer un sélecteur de blog: Maintenant, avant d'aller de l'avant et d'utiliser ce composant, nous devons parler de cet énorme sélecteur Parce qu'à l'heure actuelle, il a reçu l'État, puis nous avons obtenu le blocage de l'État. Mais si la structure de notre État change comme c'est le cas actuellement, ce composant devrait en savoir plus besoin de savoir que nous allons bloquer l'État, cela pourrait être un blog d'État, autre chose dans le futur. Il serait préférable de créer un sélecteur dans la tranche, puis de l'exporter Ainsi, si la forme de l'État devait changer à l'avenir, nous n'aurions pas à passer en revue et à modifier chaque composant. Nous pourrions changer une fois sur la diapositive. Faisons-le dans nos tranches de blocs ici. Nous allons créer un fichier sélectionné, je vais exporter ce fichier. Exportez, sélectionnez tous les blocs. Nous allons avoir une fonction anonyme qui passe à l'état A. Ce seront des blocs d'État, d'accord ? Nous pouvons maintenant intégrer ce sélecteur dans ce fichier JS de liste de blocs Permettez-moi de trouver celui-ci à partir de Block Lies. Nous devons sélectionner tous les blocs ici. Nous pouvons simplement passer, sélectionner tous les blocs. D'accord ? Sauvegardons ce fichier. Passons au navigateur. Cela fonctionne toujours avec cette approche. La partie sélecteur est également complétée dans cette application. 42. App Blog Project 4 - Créer des actions pour ajouter un blog: Passons maintenant à la création d'une fonction de réduction ou à l'ajout du blog dans notre application Je vais ajouter une action ici dans cet objet réducteur. Nous allons avoir un blog. OK, il va y avoir une action de l'État, nous pouvons faire quelque chose comme ça. L'état, le push et l'action font la charge utile ici, l'action fait la charge utile Fondamentalement, les informations sur notre blog qui contiennent essentiellement le titre, le corps et l'identifiant utilisateur. C'est notre action que nous avons introduite dans notre objet réducteur. Nous allons maintenant parler de cette poussée d'état dans une seconde, car si vous connaissez suffisamment la réaction, nous ne mutons généralement pas un état Et cette pression de points ferait l'affaire dans un tableau. Nous en reparlerons dans un instant. Permettez-moi d'abord d'exporter cette fonction. Nous allons avoir un blog qui ment, une action qui crée des mensonges. Générez essentiellement un accent créé avec le même nom celui que nous avons défini ici. C'est sur le blog. Je vais générer automatiquement le créateur d'accent. 43. Application de blog Project 4 - Comprendre le rôle d'immer js: Parlons maintenant cette campagne étatique que nous avons écrite ici. Nous avions généralement l'habitude d'écrire un état comme de le diffuser. Ensuite, nous avons une charge utile d'action sous forme nouvel élément au lieu d' une commande d'état, mais utilisation de la boîte à outils de lecture apparaît sous le capot et vous permet d' écrire votre script Java de cette manière Où vous devriez normalement faire muter l'état. Mais il ne mute pas. L'État émerge, crée un nouvel état en dessous. Nous réalisons maintenant que cela ne fonctionne qu'à l'intérieur de create slice, alors dans le cas contraire, dans votre application, vous devez toujours utiliser la méthode appropriée pour ne pas faire muter l'état Cependant, l'intérieur crée le mensonge. Vous pouvez utiliser state push et vous pouvez directement l'état d'une autre manière. Emerges s'en chargera. Cela facilite la manipulation à l'intérieur comme à l'intérieur. 44. Application de blog Project 4 - Action de diffusion pour ajouter un blog: Passons donc à l'action et utilisons cette action dans notre composant de formulaire. Passons à cela dans le fichier Block Forms. Nous allons utiliser cette action que nous venons de créer. Maintenant, dans notre section de blog, nous avons déjà un formulaire de base ici. Vous pouvez le voir pour le moment. Je vais juste recommander cette liste déroulante. Concentrons-nous simplement sur la publication du blog avec son titre et son corps. Nous avons sur E on Summit dans lequel nous devons simplement empêcher le défaut Nous avons ce changement de pseudo pour suivre essentiellement l'état de chaque champ. C'est-à-dire que nous avons ici une zone de saisie et de texte. Et nous allons écrire une logique pour soumettre le blog ici uniquement au sommet. Nous devons donc d'abord apporter une énorme expédition. OK, nous devons donc apporter une énorme dépêche provenant d'un rouge. Pour envoyer une action, un envoi énorme, nous devons stocker la référence d' envoi énorme dans une variable d' expédition. Nous devons stocker la référence de cet énorme envoi dans cette variable d'expédition afin de pouvoir envoyer une action. Maintenant, voici ce que nous devons faire d'abord, je vais juste vérifier si nous avons le titre, puis nous allons essentiellement expédier. Nous devons également passer à l'action. Passons également à l'action. De notre blog se trouve un blog que j'ai publié ici. Nous pouvons expédier ici comme sur un blog. Ici, nous devons d'abord fournir l'identifiant. Je vais utiliser un identifiant nano de Red Toolkit. Nous avons essentiellement besoin d'un identifiant unique à cette fin. Pour apporter une boîte à outils Nano ID, chaque bloc doit contenir un identifiant unique. Ici, nous pouvons utiliser le nano ID et ce sera entre parenthèses Maintenant, nous pouvons conserver le titre. Ensuite, nous voulions essentiellement effacer chaque champ de saisie, à titre et la forme du corps du texte. Faisons-le vide. Ce titre, ce champ de saisie et cet extérieur du corps. Après avoir soumis le blog, vérifierons s' il fonctionne ou non. Passons au navigateur. Et ici, j'ai oublié d'apporter le composant dans notre fichier app point JS. Permettez-moi d'apporter le formulaire d'ajout de bloc de composants. Passons maintenant au navigateur. Il y a un problème de style. Laissez-moi voir ce qui se passe. Nous devons ajouter un style dans notre fichier CSS à points d'index. Je vais juste coller le style. Nous devons ajouter ce style de base dans notre fichier d'index. Ne vous inquiétez pas, ce style est toujours présent dans votre étoile. Tu n'as pas à t'inquiéter pour cette partie. Sauvegardons celui-ci et entrons dans le navigateur. Bien, OK, permettez-moi reformuler l'application. Ça a l'air bien. Nous devons maintenant publier notre premier blog en envoyant cette action que nous avons définie ici OK, à notre sommet. Voyons si cela fonctionne ou non. Laisse-moi juste faire un test. OK, laissez-moi savoir ce qui se passe ? Cliquons sur Soumettre. Nous en avons un peu, d'accord, laissez-moi voir ce qui se passe ici. Ce sera Body Content. Assurez-vous de changer celui-ci du contenu au corps. Passons maintenant au navigateur et reflétons cette application. Nous sommes toujours aux prises avec le problème. Ce sera du corps et non du content. OK, sauvegardons celui-ci. Passons au navigateur. Maintenant que nous avons nos deux articles, d'accord, fermons celui-ci. Publions notre blog avec l'action que nous venons de créer dans nos blogs mensonges. Donnons-lui un T. Cliquons sur Soumettre. Vous pouvez voir que cela fonctionne. Nous avons donc réussi à ajouter un blog simple avec notre action que nous venons créer à l'aide de la boîte à outils. 45. Application de blog Project 4 - Utiliser préparer un rappel: Maintenant, notre formulaire fonctionne parfaitement. Mais ça pourrait être mieux. Parlons-en, car à l'heure actuelle, il a besoin de connaître les détails de l'État. Encore une fois, pour l'envoyer correctement, il doit envoyer un objet correctement formaté Et il vaudrait mieux que nous puissions en attirer une partie. Nous ne voulons pas dupliquer ce type de logique dans chaque composant qui publie dans notre état global. Au lieu de cela, nous pouvons gérer cela à volée avec un rappel préparé Et Prepare Callback peut générer un identifiant unique, formater les données, renvoyer l'objet avec une charge utile Et c'est essentiellement ce que nous faisons ici. Cela simplifiera vraiment notre composant et il gérera tout une fois de plus, revenons à la tranche Passons à la tranche ici. Nous devons modifier notre blog publicitaire. Ce que nous pouvons faire ici, laisse-moi juste couper celui-ci ici. Nous allons avoir un réducteur. OK, nous allons avoir, encore une fois, la même chose. C'est l'état et l'action. Nous pouvons simplement agir comme un État, passer à l'action. Charge utile. Action, charge utile. Ici, nous pouvons définir notre préparation au rappel. Nous pouvons maintenant transmettre le titre et le corps. Ensuite, nous pouvons renvoyer un objet formaté. OK ? Et il va revenir avec la charge utile Encore une fois, nous allons avoir un identifiant ici. Encore une fois, nous devons apporter ici le nano ID. Apportons Nano ID, une boîte à outils rouge. Ensuite, nous pourrons avoir notre titre et notre corps. OK, mais il nous manque quelque chose ici. Formulaire et quelque chose qui nous manque. Laissez-moi vérifier ici. Je suppose que nous devons supprimer les deux choses. D'accord, et pour le retour, nous devons l'utiliser. Je pense que c'est pour ça que c'est bon. Vérifiez. D'accord, ça a également l'air bien et nous devons en ajouter un de plus. OK, alors laissez-moi formater celui-ci maintenant. C'est bon Vous pouvez voir qu'ici nous transmettons le titre et le corps que nous obtiendrions du composant, puis celui-ci renvoyait la charge utile de l'action telle qu'elle devait être formatée Nous sommes revenus ici , puis nous avons une charge utile dans laquelle nous définissons l'identifiant avec le nano ID ainsi que le titre et le corps Nous avons modifié notre tranche avec le rappel prepare. Maintenant, nous devons également nous adapter à ce qui se trouve dans notre forme de bloc. À partir de là, nous pouvons supprimer cet objet et nous pouvons simplement le transmettre et le corps, le reste sera géré dans notre tranche avec ce rappel de préparation que nous venons de définir ici. Bien, revenons à ce formulaire. L'avantage ici est que notre composante, encore une fois, n'a même pas besoin de connaître la structure de l'État. Maintenant, tout est géré à l'intérieur de la diapositive. Nous pouvons simplement envoyer les données brutes dont nous avons besoin. Essayons celui-ci dans notre navigateur. Je vais de nouveau accéder à mon navigateur. Reflétons cette application. Faisons un test du titre, Test it Summit. Maintenant, vous pouvez voir que cela fonctionne. Grâce à ce rappel de réparation, nous sommes en mesure de publier notre blog avec succès. Cette partie est complétée ici. En gros, nous simplifions ou codons un peu dans notre tranche. Maintenant, nous en avons fini avec cela et nous pouvons supprimer celui-ci. Nous n'avons pas besoin de NanodCEO. J'ai plus besoin de l'identifiant pour créer un blog car tout est géré dans notre tranche. Débarrassons-nous de ça. 46. Application de blog Project 4 - Outil de développement Redux: Maintenant, avant d' aller de l'avant et de passer à la partie où nous allons sélectionner dans le menu déroulant, parlons simplement de la restauration Permettez-moi de revenir au navigateur, actualisez cette application. Tout d'abord, je vais ouvrir un outil Redcap. Vous pouvez installer l'extension Duct Tape Tool dans votre navigateur. Je vais ouvrir sur ma droite. OK, permettez-moi de rafraîchir cette application. Ici, vous pouvez voir qu'à l' état de notre application, nous avons obtenu ces deux blocs dans notre état initial. Et vous pouvez voir l'état dans un format différent, comme un graphique. Vous pouvez le voir dans le graphique. Vous pouvez également voir dans le format brut que vous avez un format différent pour afficher l' état de notre application. rouge est essentiellement utilisé pour suivre l'état de l'application et vous pouvez également suivre l'action que vous allez dissiper Essayons à nouveau d'ajouter un bloc. Je vais juste te refaire un test. Voyons voir, Opto, vous pouvez voir que nous avons envoyé notre action de blog publicitaire dans le dépôt rouge Vous pouvez également suivre l'envoi de l'action. Nous avons obtenu cette action. Bon, maintenant nous avons trois blogs. Dans notre application, ce blog est ajouté. Vous pouvez voir que ce nouveau blog a été ajouté dans notre boutique. Vous pouvez également calculer la différence ici. D'accord, ce nouveau blog est ajouté à notre boutique. Il s'agit d'une action que nous venons de lancer en cliquant sur le bouton Soumettre. Il s'agit de l'aperçu de base de outil Reduct Tap et de la façon d'utiliser cet outil de réduction chaque fois que vous utilisez Reduct dans une application React Maintenant, je vais minimiser celui-ci. 47. App Blog Project 4 - Créer une tranche utilisateur: Je vais maintenant commencer à travailler sur la partie utilisateur de cette application afin que l'utilisateur puisse sélectionner l'utilisateur dans le menu déroulant lors de la soumission du blog. Je vais avoir un autre dossier dans ces fonctionnalités. Je vais avoir un dossier comme Users, nous allons avoir un mensonge, un mensonge car, encore une fois, mensonge car, encore une fois, je dois créer une tranche à partir de la boîte à outils Reduct Passons à la tranche de la boîte à outils Reduct. Ensuite, je vais juste placer l'état initial. Nous allons avoir un utilisateur par défaut afin que vous puissiez le sélectionner dans la liste déroulante des utilisateurs Ensuite, nous allons avoir une tranche utilisateur. Nous allons fournir le nom de la tranche. Ce sera le cas, nous pouvons passer son état initial. Le réducteur sera l'objet vide. Encore une fois, je vais créer un sélecteur ici pour que l' utilisateur puisse exporter et sélectionner tout Nous allons avoir une fonction anonyme. Ce sera un État et des États. Ensuite, nous pouvons exporter le réducteur par défaut. Ensuite, nous pouvons raccorder ce réducteur dans notre magasin. Passons à ce fichier de stockage. Je peux simplement copier celle-ci, cette déclaration d'importation. Ce sera un utilisateur, cela viendra de mensonges. Nous devons changer l'ensemble de la pièce. Il proviendra du dossier des utilisateurs, puis de la tranche des utilisateurs. Ce sera le cas, et le réducteur des utilisateurs. Nous en avons terminé avec la tranche utilisateur dans cette application. 48. App Blog Project 4 - Liste des utilisateurs dans la liste déroulante: Revenons maintenant à ce formulaire de bloc. Ici, nous devons d'abord réunir tous les utilisateurs. Nous devons également apporter un sélecteur. Ici, nous pouvons avoir tous nos utilisateurs, d' accord, nous pouvons apporter le sélecteur que nous venons de définir dans cette tranche Apportons ceci : sélectionnez tout le code utilisateur VS qui sera automatiquement importé pour moi. D'accord, ce n'est pas important dans votre cas, vous devez donc l'importer manuellement. Maintenant que nous avons tous les utilisateurs, d'accord, nous pouvons simplement décommenter cette ligne de code ici Ce que nous devons faire, c'est avoir une option. Option. Nous voulons tous les utilisateurs, nous pouvons le cartographier. Nous allons le faire, avoir une option sera comme un utilisateur. Nous pouvons saisir ici un utilisateur de valeur. Puis à l'intérieur de ce nom d'utilisateur. Utilisons cette option utilisateur ici. Dans le menu déroulant ici, nous pouvons avoir l'option utilisateur. Voyons si nous pouvons voir l'utilisateur ou non dans le menu déroulant. Revenons au navigateur. Voici nos trois utilisateurs que nous avons définis dans notre vie d'utilisateur, savoir John Doe, Nancy et James Bond. Cette partie est terminée, mais nous devons encore apporter quelques modifications avant de publier notre nouveau blog avec ces derniers changements. 49. Application de blog Project 4 - Modifier l'action et préparer un rappel: Quels changements devons-nous apporter ici ? Comprenons qu' en ajoutant le bloc, nous allons également transmettre l'utilisateur. OK. Voici ce que nous allons faire, vous pouvez voir que pour le menu déroulant nous utilisons ici, handle, user, handle user va essentiellement restaurer l'utilisateur, d' accord, cela va restaurer l'identifiant utilisateur Comme vous pouvez le voir ici, dans la fonction handle user. Passons également ici le nom d'utilisateur. nous avons initialement défini trois éléments, tels que le titre, le corps du texte et l' ID utilisateur pour notre formulaire de blog, nous transmettons cet ID utilisateur puisque nous avons cette partie action lors de l' envoi de ce bloc publicitaire Nous avons ajouté un argument supplémentaire, l'ID utilisateur, par exemple quel utilisateur publie le blog Nous devons également modifier ou préparer fonction de rappel que nous avons définie dans le blog li, entrons dans ce fichier Permettez-moi de revenir à ce fichier qui est blog slice. Alors maintenant, il va recevoir le nom d'utilisateur. OK. Donc, l'ID utilisateur va recevoir et ce sera l'ID utilisateur. OK. Nous avons donc modifié notre appel de préparation. 50. Application de blog Project 4 - Montrer le blog avec un utilisateur: Maintenant, nous devons également apporter quelques modifications au composant utilisateur de notre blog. OK, pour le moment, il montre juste l'utilisateur inconnu. Nous n'affichons pas le nom d'utilisateur. Bien, avant cela, revenons à ce fichier de liste de blogs. Ici. Vous pouvez voir que nous transmettons le nom d'utilisateur. Nous cartographions chaque bloc que nous recevons de notre boutique. Et nous transmettons l'ID utilisateur ici, accord, à ce composant utilisateur du blog. Nous pouvons mentionner ce nom d'utilisateur ici. OK, après cela, ce que nous devons faire, apporter le premier sélecteur depuis React Reader Comme nous devons trouver quel utilisateur publie essentiellement le blog, nous devons d'abord sélectionner tous les utilisateurs figurant dans notre tranche utilisateur. Ensuite, nous avons besoin d'abord du sélecteur de tous les utilisateurs Et nous pouvons passer ici le sélecteur que nous avons défini dans la tranche utilisateur, sélectionner le port de tous les utilisateurs automatiquement pour moi Ensuite, nous pouvons écrire une logique de base ici. Nous devons trouver l'utilisateur que nous pouvons utiliser. Ici tous les utilisateurs trouvent que nous allons avoir chaque utilisateur Nous recevons déjà l'ID utilisateur de notre composant de liste de blocage. Ce sera comme un point ID. Et si l'identifiant correspond, nous allons saisir cet utilisateur et nous allons afficher le nom. Ce que nous devons faire ici, c'est d' abord supprimer celui-ci. Si nous avons l'utilisateur, alors le nom d'utilisateur L, ce sera un utilisateur inconnu. OK, sauvegardons ce fichier. Passons également à ce fichier js du formulaire de blocage des publicités. Ici. Je vais également vider le champ déroulant, nom d'utilisateur, et il sera vide après avoir soumis le blog Avant de publier un blog avec toutes ces modifications, je voulais désactiver le bouton Soumettre jusqu'à ce que tous les champs soient remplis par l'utilisateur. Ce que je peux faire, je peux en avoir un, c'est le remplir. Il va vérifier si chaque champ de saisie a une valeur ou non. Nous pouvons utiliser votre titre Bullion, ce sera Body Bullion, ce sera Ce bouton sera désactivé. Si un champ d'entrée est laissé vide, nous pouvons simplement vérifier celui-ci. OK ? Voyons si cela fonctionne ou non. Nous devons retourner au navigateur. Reformulez celui-ci Je vais sélectionner un utilisateur ici, John Doe. Faisons un test de titre. Faisons un test corporel. Vous pouvez maintenant voir que ce bouton est activé après avoir soumis la valeur dans chaque champ de saisie. Cliquons sur Summit. Maintenant, vous pouvez voir que cette fois, nous avons également obtenu le nom d'utilisateur. C'est John Doe. D'accord, cette partie est également terminée ici et vous pouvez voir que nous avons réussi à publier également réussi à publier un blog avec le nom d'utilisateur. Nous en avons fini avec la sélection de l'utilisateur et la publication du blog avec le nom d'utilisateur spécifique. 51. Application de blog Project 4 - Action réduire pour aimer / ne pas aimer: Allons de l'avant et travaillons sur le reste des fonctionnalités de l'application. Nous devons également implémenter les fonctionnalités « j'aime » et « je n' aime Chaque fois que l'utilisateur clique sur le bouton J' aime ou n'aime pas, cela augmente Travaillons également sur cette fonctionnalité. Avec le kit d'outils Reduct, nous devons écrire une fonction réductrice pour cela Et avant d'écrire une fonction de réduction, modifions à nouveau le rappel de réparation Vous pouvez voir que dans l'état initial, nous avons un objet de réponse et contrairement à ce qui se passe, nous aurons également la même chose dans le rappel de réparation. D'abord, répondons, d'accord ? Et ce sera comme au début, ce sera zéro, tout le compte sera nul. Maintenant, chaque fois qu' un utilisateur crée un blog, sauvegardons celui-ci. Commençons maintenant à écrire une fonction réductrice pour aimer ou ne pas aimer le p. Je vais avoir ici la réponse ajoutée à fonction de réduction qui est responsable ou non ping, une action d'état à partir de la charge utile d' action Nous allons recevoir deux choses. Chaque fois qu'un utilisateur envoie une action en aimant ou en n'aimant pas, le P reçoit l' identifiant du blog et la réponse Vous pouvez voir que ce composant ici a un nom et un emoji que j'ai utilisés ici , comme entrée d'objet Comme il s'agit d'un objet et que nous le mappons, ce nom est clé et mog est valeur Nous allons passer deux choses, le bloc que nous aimons essentiellement et l'image. Nous travaillerons ultérieurement sur ce composant. Travaillons d'abord sur charge utile de cette faction à fonction réductrice Nous allons recevoir deux informations, à savoir identifiant du blog et la réponse. Nous devons vérifier l'état du blog existant. Nous avons trouvé l'état de tous nos blogs, nous allons d'abord avoir un blog. Nous devons essentiellement faire correspondre le blog, blog que nous aimons ou n'aimons pas. Tout d'abord, nous devons saisir blog en particulier et ici nous pouvons donner cet identifiant de blog. Si vous avez le blog existant, alors la réponse du blog existant. Ici, réponse ici, en gros, nous allons augmenter, d'accord ? 52. App Blog Project 4 - Afficher le nombre de likes / non likes avec Redux: Ce que nous devons faire ensuite. Ce dont nous avons besoin pour apporter d' abord une énorme expédition de React Reducts, une énorme expédition Ici, nous devons d' abord insérer la référence de dispatch dans une variable de répartition. Ce composant va également recevoir un blog. OK, extrait de notre liste de blogs. OK. Vous pouvez voir que nous n'adoptons rien pour le moment. Passons à son blog et nous pourrons juste le bloquer en particulier. OK, maintenant ce composant du bouton de réponse reçoit le blog en question. Voici ce que nous pouvons faire en un clic, nous pouvons essentiellement envoyer une action d'envoi. Nous pouvons intenter l'action. Nous avons créé l'action, mais je suppose que nous ne l'avons pas exportée. Exportons celui-ci. OK. Revenons maintenant à ce bouton de réponse ici. Tout d'abord, nous devons apporter celui-ci. Nous devons apporter cette tranche de blog sur la fonction réductrice de fonctions Nous devons apporter une réponse ajoutée. Ensuite, nous pouvons envoyer cette réponse ajoutée. Nous devons adopter deux choses. C'est-à-dire le premier identifiant de blog, que nous obtenons déjà de ce blog point ID. Ce sera le cas, à savoir que nous devons également indiquer le décompte. C'est ce que nous allons faire. Une réponse sur le blog et nous pouvons passer ici le nom. Allons dans le navigateur et voyons s'il fonctionne ou non. Tout d'abord, référez-vous à celui-ci. Maintenant, vous pouvez voir qu'au départ, nous avons obtenu le compte zéro. OK. Si vous cliquez sur celui-ci, il ne s'incrémente pas Laissez-moi voir ce qui se passe. Nous sommes en mesure d'envoyer une action ou non. Tout d'abord, voyons qu'une action ne consiste pas du tout à envoyer En fait, nous avons écrit cette fonction réductrice en dehors de cet objet réducteur, d'accord ? cette fonction réductrice en dehors de cet objet réducteur, d'accord ? C'est en train de fermer ici. Nous devons écrire ici en fait. OK, celui-ci. Et collez-le ici. Actualisez d'abord celui-ci. Cela fonctionne, d'accord ? Comme vous pouvez le constater, cela s'incrémente. Ajoutons ici un blog avec Nancy. Nous allons vous faire un test. Copions simplement celui-ci. Soumettons-le, voyons si nous pouvons aimer ou non ce blog nouvellement créé. C'est aussi du travail. Vous pouvez voir que notre fonctionnalité fonctionne également dans cette application. Avec l'aide du lecteur Tok. Il semble que tout fonctionne dans cette application de blog Imple 53. Synthèse: Si vous regardez cette vidéo, signifie que vous avez terminé ce cours avec succès et j'espère que vous avez parfaitement compris comment travailler avec la boîte à outils réduct dans l'application React. Après cela, vous pourrez également intégrer la boîte à outils de rédaction dans n'importe quel react rejeté existant. Et vous pouvez également convertir les projets React dans lesquels l'ancien code Redux utilise les projets que vous pouvez facilement convertir en Reduction Toolkit. C'est tout de mon côté. Si vous avez une requête ou un point, vous pouvez placer votre requête dans la section commentaire. Je ferai de mon mieux pour résoudre votre question. Vous pouvez également visiter ma chaîne YouTube pour obtenir plus de contenu sur le réactif ou le produit que vous pourrez acquérir plus de connaissances sur React et éditeur jeudi, vous pouvez toujours visiter mon site officiel Chaîne YouTube pour plus de faille d'un réactif. Et si vous regardez ma playlist, j'ai une dette différente et différente sur un React. J'ai un projet débutant, réduisez le projet. Je les ai également construits une application clone, et j'ai également une application pleine pile. Donc, les gars, vous pouvez toujours visiter ma chaîne YouTube officielle pour plus d'un Redux réactif. C'est tout de mon côté. Merci beaucoup d' avoir suivi ce cours. Je vous verrai dans d'autres cours.