Apprenez Redux-Saga avec Redux-Toolkit dans React JS

1. Introduction: Bonjour et bienvenue dans ce cours dans lequel nous allons apprendre comment utiliser la saga redact avec grille d'outils redact dans rehab gs. m'appelle Tom avec division et je serai votre instructeur dans ce cours. Si vous êtes développeur React, il se peut que vous utilisiez un routeur comme gestion de l'état de votre application React afin de maintenir l'état de l'application. Vous pouvez également utiliser un intergiciel réductant ou redox saga pour gérer les effets secondaires dans votre application React. Maintenant, permettez-moi de vous donner un bref aperçu de Rudolf à ceux d'entre vous qui ne savent pas ce que c'est. échec de la rédaction est donc la bibliothèque de gestion des états que nous avons utilisée dans notre application React, ainsi que vous allez utiliser dans une application frontale. Pas seulement avec React, mais il est très populaire auprès de la bibliothèque React. Voilà donc l' aperçu de Rudolf. Avec l'aide de cette application, vous allez apprendre comment intégrer trois taxons avec gouvernail à liquide. Dans ce cours, nous allons créer une application de recherche de films à l'aide de réduct saga et do dark toolkit. Donc, le kit d'outils de rédaction déjà de notre solution différente pour gérer le fonctionnement asynchrone, probablement que vous pouvez gérer les effets secondaires de l' application avec créer un think tank sont une requête RTK, mais parfois vous pouvez le vouloir pour utiliser l' approche de la saga exagérée pour gérer l'effet secondaire de votre application. Avec cette application, nous allons intégrer avec le débarrassé de la porte totale. Et j'espère que vous avez une certaine compréhension de l'ADA redox et fonction générateur car redox saga Youth Generator fonction pour écrire une logique asynchrone. Mais jusqu'à ce que je vous donne un bref aperçu AGA redox et de la fonction générateur plus tard dans cette vidéo. Mais d'abord, faisons une démonstration rapide de la publication des données. Donc, dans ce film, c'est que chaque application nous allons chercher un film lié à sa poudre. Au départ, il s' adaptait à une dizaine de films à l' aide d'une API tierce appelée OEM DBAPI. Chaque fois que vous le définissez sur un film avec un nom spécifique ou une API IMDB, ne retournez que dix films. Et vous avez fait ce circuit. Disons que Jim, je voulais chercher le film avec le mot-clé S. Cette fois, avec un retour à de nombreux résultats. De plus, nous allons gérer uniquement la boîte à outils hétérodox et expurgée. Vous pouvez également commencer par un autre nom de film, comme Batman. Vous pouvez également démarrer le film avec un autre nom de film. Et si vous souhaitez en savoir plus sur un film spécifique, vous pouvez cliquer sur cette carte. Vous n'arriverez jamais au film unique où nous avons plus de détails sur ce film spécifique, comme le nom, l'oreille, l' intrigue et la réalisation. Si nous cliquons sur l'unité GoBear, revenez à la page d'accueil. Les gars, cette application va également être réactive car nous utiliserons bibliothèque d'interface utilisateur matérielle pour construire le composant React. Vous pouvez voir que cette application est également réactive. C'est donc l'obligation générale que nous allons construire dans ce cours à l'aide d' une saga relative et d'une boîte à outils expurgée à Riyad. Parlons maintenant des compétences requises 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 comprendrez comment intégrer la saga redact à la boîte à outils redact dans n'importe quelle application React. 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. C'est ça. 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 est la gestion successorale. Nous avons notre principal composant d'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 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. Nouveau parc national au magasin. Le magasin l' envoie automatiquement à tous les composants et dirigé 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. 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 Redux-Toolkit ?: Alors maintenant, comprenons quel est le bon lecteur à liquider également utilisé pour gérer l'application si vous énoncez une application React de manière efficace. Il a fourni des batteries incluses dans un 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. Les routeurs étaient 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 redact, il y avait tellement de code nécessaire pour le configurer, afin d'optimiser ce niveau de base. Et donc trop de code de plaque chauffante, ce qui rend notre code, nettoyons le tout 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. ensemble, le lecteur doit examiner sa période de réduction et de développement en incluant le lecteur Corbett rédaction de bons paragraphes qu' ils pensent être remplis pour construire une application native. outils redact permet donc aux développeurs d' écrire du 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 compteur. 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 pourriez avoir, remarquez ici, 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'écrire la mutation logiquement, réduisant. Il s'agit de la boîte à outils du lecteur avec le scénario de base. 4. Qu'est-ce que Redux-Saga ?: Redact saga est une bibliothèque qui vise à appliquer les effets secondaires des applications. Le troisième effet consiste ici à effectuer une requête HTTP, financer un événement WebSocket ou à récupérer des données à partir du serveur GraphQL. enregistrant une sorte d' informations sur le cache, notre navigateur les a stockées localement. Cette chose est sous l'effet secondaire que V a géré à l'aide de la saga exagérée, avec l'hypothèse que le stagger est devenu très facile à gérer, plus efficace à exécuter, et mieux à valeur de manipulation. Il s'agit de la saga expurgée. Ici, saga utilise la fonction ES6 appelée fonction générateur pour écrire du code asynchrone. Avec cette approche, notre code asynchrone ressemble à un code JavaScript synchrone tendre. Il s'agit donc de la fonction générateur. 5. Qu'est-ce que le générateur ?: Comprenons maintenant le concept de générateur. Le générateur est donc un type spécial de fonction JavaScript. Nous l'avons introduit dans l'EF fixe et cette fonction avec l'Italie peut l'arrêter à mi-chemin, puis continuer à partir de là où elle est enseignée. En JavaScript, Janitor est une fonction qui renvoie un objet sur lequel vous pouvez invoquer une méthode suivante. À chaque appel de méthode net, il retournera un objet de ce coffre-fort. Il aura une valeur. Et la valeur peut être n'importe quoi et le fait sera soit faux, soit vrai. La plupart du temps, ce sera faux. Et cela deviendra vrai lorsque nous n'avons pas de déclaration de rendement. Je vais donc expliquer les mauvais traitements plus tard. Ainsi, chaque fois qu'il ne trouve aucune déclaration de rendement dans la fonction générateur, le générateur disparaît et ne génère aucune valeur. À chaque appel, il génère une nouvelle valeur. Une fois que vous avez vu que la valeur de done est terminée, cela signifiait notre connaissance générative et cela ne générera aucune valeur. C'est le code de base est un extrait de la fonction générateur, quoi il ressemblait. Vous pouvez voir que nous avons une étoile ici, la fonction, ce qui signifie que cette fonction est une fonction générateur. Vous pouvez donc constater que nous avons un rendement annuel. C'est un opérateur sur lequel le générateur peut se mettre en pause. Donc, en gros, notre exécution se fait avec l'Italie. Et une fois que vous appelez cette méthode comme un dotnet itératé, quelle que soit la valeur que nous avons ici, elle le retournera rapidement sous la forme de cet objet. Il renverra donc une valeur unique. Et la valeur de w1 sera la fausse. Si je vais à ce GFP et que vous voyez que nous avons le même code ici. Nous avons une fonction générateur. Nous avons un rendement d'un an, de deux ans, de trois ans pour celui-ci. Si je clique, vous pouvez voir que nous avons obtenu cette valeur et avons fait les déclarations de Paul. Nous avons encore un certain rendement si une déclaration. Maintenant, pour obtenir cette valeur, cette valeur. Vous devez donc invoquer à nouveau la méthode suivante. Si je ne fais que copier ce journal de la console et le coller ici. Et si je le laisse à nouveau et que je fais effet, si je cours à nouveau. Maintenant, vous pouvez voir que nous avons obtenu cette valeur ici et la valeur de Danny est toujours fausse car nous avons toujours la déclaration annuelle. Si je copie, encore une fois, j'ai juste effacé celui-ci. Maintenant, nous avons obtenu la valeur trois ici, et c'est toujours faux. Et si je copie à nouveau, si je viens d'effacer celui-ci, et si je clique à nouveau sur Exécuter, nous avons obtenu cette valeur et nous l' avons toujours fait à plusieurs reprises, l'exécution est suspendue. D'accord ? Et si vous travaillez à nouveau la méthode suivante. Maintenant, il va découvrir que nous n' avons pas de déclaration de rendement. Si vous cliquez à nouveau, vous obtiendrez cette valeur indéfinie et exécutée via l'administrateur. Notre fonction générateur s'arrête maintenant ici. C'est ainsi qu'une fonction générateur fonctionne en JavaScript. C'est comme ou comme ça, fonction générateur fonctionne dans le JavaScript. J'espère que vous comprenez maintenant le concept de fonction générateur. 6. Configuration du projet: Les gars, mettons en place ce projet. Je vais donc ouvrir une invite de commande. Créons notre projet ici avec la commande N dx create. Le nom du projet sera comme une application de film. Appuyez sur Entrée. Et il faudra environ deux à trois minutes pour installer toute la dépendance nécessaire. Je reviendrai donc l'un à l' autre, sachez que la configuration de notre projet est maintenant terminée ici. Vous pouvez voir que nous allons abord dans ce dossier qui se déplace. Avant que nous ne le fassions et que PMI commence. Dans ce projet, nous utilisons l' interface utilisateur matérielle pour créer notre composant React. Nous allons donc d'abord copier cette 15 fois en installant tous les paquets nécessaires à la construction de cette application. Ici. Nous n'avons besoin que de matériel d' interface utilisateur. Nous avons également besoin de styles d'interface utilisateur matérielle. Et en dehors de cela, nous avons besoin d'autres paquets comme React, un x. Nous avons également besoin de saga exagéré tout en réagissant à l'autel vers le bas. Maintenant. Nous avons besoin de X, oui. Nous allons donc installer ces paquets. Paquets installés. J'ai déjà ouvert ce projet dans mon code Visual Studio. Allons dans le code VS. C'est donc notre projet que j'ai ouvert dans mon code VS. 7. Configurer la clé de l'API OMDB: Avant de commencer à écrire un code, configurons d'abord notre clé API IMDB ou IMDB. Je vais dans le navigateur et le genre ou clé d'API IMDB pour obtenir toute la cible mobile. Si je veux configurer celui-ci, vous devez vous rendre sur ce site Web ou IMDB APA. Et après cela, vous devez cliquer sur cette clé API. Et ici, vous devez en sélectionner trois. Vous devez maintenant fournir des points de vente tels que l'e-mail, le nom et ce qu'ils ont utilisé pour vous dire que vous devez fournir et après cela, vous devez cliquer sur Soumettre. Une fois que vous avez fourni les détails. Et si vous cliquez sur le bouton Soumettre, vous allez éviter une méthode telle qu' un lien de vérification pour activer votre clé à cette valeur non valide. Vous devez ouvrir votre compte Gmail. Vous pouvez donc voir que vous avez votre clé ici et que vous devez vérifier votre clé en cliquant sur ce lien. Vous pouvez copier cette clé dans votre code VS et vous devez cliquer sur ce lien pour vérifier cette clé. Maintenant, notre gay s'est activé ici. Fermons celui-là. Je copie cette clé. Je vais le payer dans mon code VS. Je vais coller la clé que nous avons générée jusqu'à présent. Maintenant, je ne fais que coller la clé ici. Et voyons si notre paquet est devenu plus grand, le total de notre paquet. Maintenant, vous pouvez voir cette main que nous allons faire ici, et attendons le chargement de l'application dans le navigateur. Il est en cours de chargement dans notre navigateur. Notre application se charge donc correctement dans le navigateur. 8. Structure et nettoyage de l'application: Passons maintenant au code VS. Je vais capturer notre projet. Nous allons avoir pour les bords de lumière LED. Ensuite, nous allons avoir un dossier pour les composants. Ensuite, nous allons avoir un dossier pour redox. Dans la racine, nous allons avoir une variable d'environnement, point A et B. Ici, je vais avoir ma clé API de film, mon APA de film, ma clé publique et la coller ici. Puisque nous avons créé une variable d' environnement dans cette application, nous devons redémarrer notre serveur. Laissez-moi redémarrer celle-ci. Maintenant, ce que je vais faire cinq, donc cinq fois je vais faire un nettoyage, voire une application. Supprimons tout ce dont nous n'avons pas besoin. Ici. Je vais juste donner un titre. Le logo n'est pas requis, alors supprimons celui-ci. Je vais supprimer ce fichier. Nous n'avons pas besoin de celui-ci. Enlevons également celui-ci. Logo SVG. Dans le fichier index.js. Ce sera des additifs de séjour. Allons d'abord dans le navigateur. En travaillant, nous n' avons aucun problème maintenant. 9. Configurer Redux-Saga: Je vais maintenant configurer la boîte à outils de rédaction dans cette application. Je vais créer un fichier dans ce dossier de réduction. Je vais avoir un fichier oui, stocke dot js. Je vais avoir un dossier pour la fonctionnalité. Dans le troisième filtre, je vais avoir nos diapositives. Nous avons affaire au film. Donnons donc cette diapositive ici. Films slice dot js. À l'intérieur de ce redex, je vais aussi avoir quelques fichiers. Je vais demander à APA de nous. Je vais avoir une saga, aussi un film sagas dot js. Cela tiendra tout simplement étreint que nous allons avoir aura une saga de racine aussi. C'est ça. Ce fichier est nécessaire à l' intérieur du dossier reduct. Tout d'abord, configurons la boîte à outils de rédaction dans cette application. Pour l'intérieur de ce fichier, nous devons apporter la boîte à outils Edge Slide Reduct. Créons des diapositives. Maintenant, disons-le. Nos films tranches, tranches, tranches, tranches, nom de tranche ici. film B. Définissons l'état initial de notre application. Nous allons avoir une liste de films à l'état initial, qui contiendra tous les films que nous allons recevoir de notre IMDB. Il s'agira d'une erreur, qui sera initialement saisie. Et nous allons avoir un autre état initial qui contiendra un seul film et des détails. Il sera dans l'objet T. Après cela, nous pouvons exporter celui-ci. Exportez par défaut, films lyse ou réduits. Maintenant, revenons au fichier js du magasin. Ici, nous devons apporter des configurations vers une boîte à outils plus expurgée. Configurez-le déchiré. Ensuite, nous devons apporter une saga de création, un intergiciel Rameau ou une saga exagérée. Nous devons apporter uniquement de l' affaissement expurgé, pas du noyau. Enlevez celui-ci. Maintenant, nous devons apporter nos diapositives de films. tranche de film si importante. film si important le réduit. Donc, des diapositives, rien d'autre que nous l'avons réduit. Réduisez-le de la tranche de films. Nous devons également faire ressortir la saga des racines. La saga des racines. Maintenant, nous devons créer l'instant de la mort Create Diagram middleware appelé middleware saga. Intergiciel. Faisons-le ici parce que c'est le magasin. Nous sommes en train de configurer notre boutique. Configuration médiocre. Nous allons encore l'avoir réduit. Et c'est une clé de cinéma pionnière. Signe. Je suis offensé de le réduire ici, c'est notre film le réducteur. Maintenant, nous devons également utiliser votre intergiciel. Nous utilisons donc ici saga ajouter un intergiciel. Nous devons donc également spécifier un modèle dans lequel notre intergiciel par défaut est utilisé. Intergiciel par défaut. Nous sommes d'accord. Troisièmement, nous allons mettre notre middleware saga. Après cette saga Middleware Dot Run. Ici, nous allons passer le magasin par défaut d'exportation de racines saga. Je vais juste faire un commentaire, cette ligne de code car le moment nous n' avons pas de football. Cela générera une erreur une fois que vous aurez configuré la réduction en liquide avec notre application React jusqu'à présent. Maintenant, posons simplement un commentaire ici. Allons dans le fichier index.js. Ici, nous devons amener le fournisseur de notre réacteur à partir de réagi avec le fournisseur de x minutes. Nous devons également apporter un dossier de magasin. Nous allons envelopper notre composant d'application avec le fournisseur. Coupons celui-ci et collons-le ici. Et nous allons le restaurer. Enregistrons ce fichier et passons dans le navigateur et vérifions si l'outil de rédaction créé avec succès n' est pas dans notre application. Réparez celui-ci, nous n'avons aucun problème. Nous allons donc ouvrir DevTools de réduction. Vous pouvez voir que nous sommes en mesure de voir notre état initial. Et cet outil de profondeur de réduction que nous avons défini dans notre film diapositives dot js file, valeur d'état que nous sommes en mesure de voir dans cette vidéo. Nous créditons qu'il est entièrement configuré dans notre application React. 10. Activer le rouage: Activons maintenant le routage dans cette application. Nous n'aurons que deux pages dans cette application. C'est chez nous, pas JS. Nous allons le déplacer ou le SIG dans lequel nous allons résoudre un seul film avec quelques détails. Enclenchons les prises inhiber ici. Générons également un extrait de réactif dans ce fichier. Passons maintenant au fichier app.js. Enlevons celui-ci. Apportons le composant de notre réaction. Nous avons besoin de routes de routeur de navigateur. Voyons voir, déplacez-le. Laissez-le s'adapter au composant de niveau supérieur qu'est le routeur du navigateur. En troisième lieu, ils sont en troisième position, nous allons avoir itinéraires sur lesquels nous allons avoir plusieurs itinéraires. Trouvons notre itinéraire à domicile. Apportons automatiquement notre code de composant domestique. Importez cette page. Nous allons également avoir quatre films célibataires. Donc, une carte d'identité, d'accord. Nous allons rendre le composant vidéo. routage est configuré. Vous pouvez le vérifier dans le navigateur. Allons donc dans le navigateur. routage fonctionne. Passons au film aussi. Également. D'accord ? Les deux ont donc été routés dans cette application React. 11. Travailler sur des actions et des API - Chercher des films: Je vais commencer par la prochaine partie où nous allons chercher tous les films de notre propre API IMDB pour récupérer tout le film quand c'est aussi, action et Saga. Cinq fois, je vais commencer avec ce film diapos fichier js. Je vais écrire de l'action. Donc, l'action dans réduct toolkit, nous écrivons à l'intérieur, cela réduit leur première fois qu'ils auront de bons films. Au départ, nous adaptons le film avec le nom de pyridine. OK ? Nous allons donc recevoir ce nom, composant Pramod et nous pouvons simplement renvoyer oui nom. Après cela, nous devons filmer les films, certains films. Cela aura un état. Mettons ici aussi une virgule. La liste des films State Dot est juste à l'action. Charge utile Dot. Exportez également cet axone. Exportez donc des films, des diapositives, des accents de points. Pour le moment, nous avons deux actions qui sont des films. Des films. Nous avons créé cela pour XN. Maintenant, je vais commencer par notre APA. Ensuite, nous travaillerons sur nos sagas. Nous devons donc d'abord préciser également le point. Je vais importer Axial. Ensuite, spécifions le point de terminaison, l'API. Endpoint. Nous allons avoir ce point de terminaison. Ce point de terminaison que nous allons utiliser pour récupérer toute la RAM vidéo ou l'APA IMDB. Maintenant, nous devons spécifier la méthode pour récupérer tous les films d'exportation de films. Au départ, nous adaptons tout le film avec le nom du film est un paradigme. Ici, nous devons spécifier le nom du film. Après ça. Nous pouvons obtenir un retour x, oui. Et nous pouvons spécifier que l'API du point de terminaison, le temps d'ampère du point de terminaison que nous devons utiliser S est égal à film. Maintenant, nous pouvons également trier cela en profondeur. Nous n'avons donc pas besoin d'utiliser le retour. Si vous avez une ligne de code, supprimons celle-ci et laissez-moi également supprimer ce retour. Ce sera également terminé. 12. Travailler sur Saga: Nous allons maintenant travailler sur la saga. Nous devons importer un effet de saga réduit. Effet. Nous devons apporter des effets comme nous le disons. Après ça. Nous devons spécifier une montre ou une année. Nous allons utiliser la fonction générateur. Donc, en chargeant des films, nous allons céder celui-ci. Alors, nous utilisons ici, laissez-le affecter cette dette, laissez-la agir en une seule fois. Et si nous lançons une autre action, et si la tâche précédente est toujours en cours , la tâche précédente avec l' Italie sera annulée. Et cette technologie lui permet d'exécuter la tâche avec les nouvelles données. Dans l'ensemble. Évitez la concurrence ici. C'est pourquoi j'utilise ici prendre, laissez-nous toujours prendre la dernière. Nous devons donc spécifier le x et le type. Nous devons donc utiliser l'année plus tard et obtenir des films provenant ou déplacer le type de point des diapositives. Ici, nous devons spécifier une autre saga qui est en charge des films. Nous avons payé par cet auditeur. Il s'agira également d'une fonction générateur. Fonction sur Load Movie. Je pense qu'il va recevoir une composante de charge utile estivale. Et ici, nous allons utiliser de l' argent à main si vous avez une erreur quelconque. Je vais donc juste faire un journal de console après ça et essayer. Indiquons une variable appelée nom de film. Charge. Nous allons être des données de charge utile et nous emménagerons. Vous ne vous embêtez pas ici. C'est ainsi que j'ai déclaré une variable ici. charge utile contiendra le nom de notre film. Définissons maintenant une variable avec des obligations automobiles. Nous allons appeler, nous allons utiliser l' effet d'appel ici, réduire vers le bas, échelonner, faire des demandes d'API pour que les films correspondent. Et nous pouvons passer le nom du film et l'argument ici. Cette première hypothèque reçoit particulièrement ce nom de film ici. Maintenant, nous allons l'obtenir en tant que liens. Et ici, nous allons vérifier si réponse.status 200. Ensuite, nous allons disperser une autre action avec la méthode Alpha PUT. support permet de disperser nouveau middleware Weimar, expurger. Nous allons donc disperser les films d'action. Ici, nous pouvons répartir notre réponse provenant de l' API IMDB pour response.data. Après cela, que devons-nous faire ? Exportez des sagas de films. Nous allons créer cette tâche lors du chargement de films. Maintenant, passons à la racine stagger. Ici. Nous devons apporter, ici, nous devons apporter l' effet Hall de notre échelon. Apportons également nos films, Ouïghour. Les films apportent des sagas cinématographiques. Ici, exportez, par défaut. Le Silvia est également généré uniquement. Ce sera nos racines. Ici, nous utilisons tout ce qui est utilisé lorsque vous devez exécuter un effet de saga multiple dans un Padlet. Cet échec utilise encore. Nous en avons fini avec nos racines. Et passons au fichier du point js du magasin. Et maintenant, nous pouvons décommenter cette ligne de code. Nous voulons maintenant tout problème dans notre application. Allons donc d'abord dans le navigateur. Tout ne s'est pas formé ici ce qui nous manque. Nous devons donc mettre de l'effet. Passons maintenant au navigateur. Nous n'avons aucune chaîne notre application après avoir écrit notre saga flash. 13. Travailler à la recherche: Nous avons donc créé notre premier échelon. Maintenant, envoyons cette action à partir de notre composant. Nous avons notre page d'accueil ici et notre film. Nous allons donc d'abord travailler sur cette page d'accueil. Cette page d'accueil avec l'Italie comportera deux volets. Enlevons donc celui-ci. Et je vais utiliser votre fragment. Je vais avoir une troisième composante. Ce composant que vous allez avoir comme un composant de liste de films, d'accord ? Un par un, nous allons travailler. Travaillons sur ce troisième volet. Je vais créer un fichier dans le dossier des composants fédéraux. À l'intérieur de cette racine deux, nous allons avoir un style de fichier, donc je vais utiliser vos styles dot js. Générons un extrait de code ici. Après cela, ce que nous devons faire pour réagir lorsque l'informatique pour apporter l'état utilise l'état, utilisez le facteur. Vous devez également apporter matériel en carton compétent en cas de panne. Ensuite, nous devons également vous amener sélectionné et utiliser ce chemin Pramod. Vous sélectionnez Utilisé dans Dispatch. Maintenant, à l'intérieur, je vais avoir un fragment. En troisième dette. Je vais avoir l' étiquette H2. Je vous donne un film. Je vais utiliser le nom de votre classe. Je vais utiliser votre style d' interface utilisateur matériel. Apportez ici. Utilisez des styles ici pour défendre ce carrelage. J'ai acheté notre composant. Apportons ce style d'utilisation à partir de. Apportons donc ces styles énormes à partir de ce fichier de type dit. Et en fait, je vais définir cette tuile pour notre troisième composant. En fait, les tuiles sont pointues. Voici ce que nous devons faire, nous devons créer un style à partir de notre style d'interface utilisateur des matériaux, styles pour les styles par défaut. Et à l'intérieur, je vais définir la partie comptable. Nom de classe différent et différent. Nous allons avoir un titre. Titre. Je vais avoir une petite lumière. Laissez-nous d'abord avoir 0,1 hauteur de ligne, je vais avoir 1,25. Ensuite, je vais avoir une marge inférieure à 0,15. Je vais avoir une taille de police. Maintenant. Nous allons également avoir une tuile pour notre champ de saisie. Alors, forme. Et ça va avoir de la largeur. Je vais donner ici 90 fenêtres d'affichage, largeur maximale. Je vais donner ici. Ensuite, je vais avoir de la marge, de l'auto, marge, marge supérieure, mortier, que nous serons tous réglés. Nous allons également avoir un nom de classe pour erreur. Pour cela, je vais colorer. Je vais encore utiliser la couleur. F 914. Maintenant, je vais avoir du rembourrage, en haut. 0,5. Ensuite, la taille de la police, je vais avoir 2,15 grammes. Bon, passons à ça, notre composant de recherche. Après cela, ce que nous devons faire cinq, je vais définir un état ou notre nom de champ d'entrée, nom. Et au départ, nous allons au film lié à une araignée, en précisant le paradigme du résumé littéraire initial. Maintenant, nous devons créer ce dixième pour cet énorme style, Le coût plus thêta au carré pour utiliser les styles. Maintenant, après cela, nous allons utiliser notre style ici. Donc le titre des points de classe. Après cela, je vais avoir Form, nom de classe que je vais utiliser ici. Encore une fois des cours à partir de ça. Je vais avoir très basique sur un point moyen de prévenir le défaut. Maintenant, dans ce formulaire, nous allons avoir un type textuel. Largeur. La valeur sera nommée. Et je vais faire des carreaux de bord ici pour ce champ de saisie. Soyez d'une largeur. Je vais donner TCH. Nous allons avoir un nom de méthode OnChange point point, valeur de point. Nous devons maintenant expédier une action à partir de ce composant uniquement. Gardons la référence de nous, c'est le mieux. Et ensuite la variable d'expédition. Il s'agira d'une expédition. Maintenant, je vais courir ici pour utiliser l' effet. C'est un effet énorme. Nous exécuterons chaque fois que nous changerons le champ d'entrée du circuit et quand le fournir indépendamment ici au nom. Et nous pouvons envoyer code comme des films pour importer automatiquement cette action. Des films comme ici, on peut passer un nom. Maintenant, nous devons apporter ce composant dans notre fichier home dot js. Au lieu de j, vous pouvez faire ressortir le troisième composant. Allons maintenant dans le navigateur. Laissez celui-ci. Nous avons deux grands, cette émotion aussi. D'accord ? Ce que nous devons faire toute cette émotion. Installez celui-ci. Nous avons déjà cette interface utilisateur matérielle. Olivia. Nous sommes les seuls à mettre à jour toutes ces deux pipettes. Pour installer ces deux paquets. Les deux paquets ont obtenu un total. Maintenant, fermons celui-là. Allons dans le navigateur. Nous avons ce troisième champ de saisie. Et vous pouvez voir qu'au départ, nous avons installé l'ascenseur du film lié à ce qui est tiré. Ouvrons. Ouvrons celui-là. Vous pouvez voir que nous recevons nos films plus anciens. Et le troisième est la liste des films. Récupérez seulement dix films avec cette API IMDB. Vous pouvez voir que nous sommes en mesure de terminer le film lié à cette araignée. 14. Erreur de gestion: Et si vous avez fait celui-ci, et si vous essayez de simuler le film uniquement avec le mot-clé F, vous obtiendrez maintenant eta. Vous pouvez voir qu'ils obtiennent ici une erreur car trop de résultats. Nous allons donc également trier la méthode de l'éditeur. Dans cette application, je vais résoudre cette méthode d'erreur. Et après cela, je vais afficher tout le film, le nom lié à son araignée. Mettons le portefeuille VS. Donc, quand il a fallu apporter notre état, vous utiliseriez sélectionné. Nous pouvons utiliser ici le sélecteur utilisé. Nos tranches de films sont enregistrées avec le film clé réducteur. Et nous pouvons avoir ici la liste des films dans le troisième film en retard, soit nous avons un film, notre erreur. Nous devons passer un niveau de plus. Et ce sera une erreur. Et nous pouvons les amener à l'erreur. Maintenant, nous pouvons vérifier Lotus TextField. Comme si vous avez l'erreur, n'a vu que l'erreur. Et quand utiliser le nom de la classe, je vais utiliser votre matériel nous tuiles ont l'air de rire. Erreur de point F. Raconter. Nous avons déjà défini dans notre fichier style dot js. Nous pouvons le faire. Passons maintenant au navigateur. Nous avons un problème. Ce sera une liste de films. Si vous regardez notre diapositive de films ou notre fichier GIF, il ne l'a pas déplacé. Allons maintenant dans le navigateur. Lisez celle-ci. Maintenant, nous n'avons aucun problème. Maintenant, supprimons celui-ci. Vous pouvez voir que nous sommes également en mesure d'afficher la méthode d'erreur. 15. Rendu à l'élément de liste de films: Maintenant, la prochaine chose que nous allons montrer tout le film lié à son araignée sous ce champ de saisie. Pour cela, nous devons créer un composant. De nos jours, liste de films, liste de films, pas JS. Générons cet extrait de code. Ici. Nous devons apporter certains composants de notre interface utilisateur matérielle. Le composant que nous allons utiliser multimédia de votre voiture contenu robot de type de contenu multimédia de votre voiture désactivé. Après ça. Nous allons également utiliser ici, vous allez sélectionner un rédux. Laissez-nous vous apporter la sélection. Nous allons avoir besoin du lien de notre routeur React dom. Et d'abord, je vais obtenir toute la liste des films que nous avons dans notre objectif. Je vais donc juste copier cette ligne de code. Je vais le coller ici. Et nous n'avons pas besoin que nous soyons seulement dans la liste de 13 films. Celui-là, ici. Supposons qu'on retire celui-ci. Je vais donc utiliser votre grille. Donnons un peu de style. Alors, nous allons grandir. Ce sera un conteneur. Encore une fois, je vais utiliser la grille. Encore une fois, je vais utiliser la grille ici. Conteneur, justifiez le contenu. Et ce sera un espacement central. Je vais en donner trois après ça. films. Je vais cartographier, nous avons les films dans cette recherche, accord, donc si vous regardez le schéma, donc si je rafraîchis cette obligation, tous les films sont stockés dans cette recherche. Au lieu de cela, nous avons notre film. Mettons-le donc le code VS. Nous pouvons donc écrire de cette façon. Une fois que nous aurons les données dans notre WR, il ne s'agira que de tout le film. Idiote. Là encore, je vais utiliser la grille et la clé. Je peux utiliser ici comme index. L'indice. Je peux utiliser votre clé en profondeur. Ce sera l'article. Je vais utiliser encore un composant de carte, un style en ligne, Sx, max, largeur, largeur. Je vais vous donner un 350. Ensuite, je vais avoir le support de ma carte. Support de carte. Je vais avoir un composant. Le composant sera envoyé par e-mail uniquement. Ensuite. Bonjour, je vais donner 350. Nous allons rendre l' image à l'intérieur de ce support de carte. Je largue. Notre image est stockée à l'intérieur de cet objet. Donc, si j'ouvre cette image, nous n'avons pas eu cette propriété. Ici, l'objet point Porter en alternance, vous pouvez donner ici le titre de point de l'objet. Après cela, je vais avoir du contenu de la carte. Et je vais utiliser ici matériel topographique, vous êtes ici. Je rends une variante de titre de point d'article. Je vais espacer par couleur corporelle. Je vais vous donner le point primaire. Maintenant, je vais aussi m' attendre à Spider ici, fait partie du film dans lequel le film d' oreille est sorti. Copions celui-ci. Collez-le ici. Allons chercher un support ici. Tout ce support de carte que je vais enrouler avec le lien. Le lien apparaîtra ci-dessous. Sous le contenu de cette carte. Nous pouvons spécifier où il est allé pour naviguer. Cela a déjà été acheminé numérique où nous affichons le film avec un certain détail. J'appelle point ici, je vais utiliser ici IMDB, IMDB ID. Maintenant, la prochaine chose que nous devons utiliser essentiellement ce composant dans notre fichier home dot js. Nous pouvons supprimer celui-ci. Nous pouvons apporter notre liste de films. Passons maintenant au navigateur. Maintenant, nous sommes en mesure de montrer qu'ils seront tous liés à une araignée. Et si vous cliquez sur n'importe quel film, vous n' arriverez jamais au seul film. Si vous avez sondé un autre nom de film. Comme Batman. Nous avons un film lié à Pac-Man. Nous avons terminé notre page d'accueil. La prochaine chose que nous allons travailler sur notre single dans lequel nous allons afficher des informations sur le film, comme quelle est l'histoire du film en quelle année il doit sortir ? Dirigé. Tout ça à raconter. Nous allons l' afficher sur cette page de film unique. Tout d'abord, nous allons travailler sur notre partie API Action Saga. Ensuite, nous travaillerons là-dessus. 16. Action, API et saga - film unique: Cinq fois, ça va commencer par notre action APA et notre stagger. Le film unique. Allons dans le fichier Movies dot js. Ici. Bien. film. Il va y avoir une pièce d'identité. Nous enverrons une pièce d'identité à partir de notre composant pour obtenir des détails sur un seul film. Ce sera comme une action de l'État. Point d'état. Le film n'est pas une charge utile. Mettons en forme celle-ci. Exportons ce film d'action. Maintenant, nous devons travailler sur notre fichier api dot js. Ce que nous devons faire, je vais juste copier celui-ci. Et ce sera des films ou des recherches plus. Nous allons voir cette pièce d'identité de film. Identifiant vidéo. Il s'agira d'une pièce d'identité de film. Ici, nous devons le donner. Maintenant, travaillons à notre saga. Mettez-le dans des films. J' ai un fichier Dot JS. Je vais juste copier celui-ci. Ce sera exactement la même chose. Ce sera comme sur Load Movie uniquement. Ce sera sur Load Movie et je pense que ce sera un film. Et nous devons également définir celui-ci. C'est donc votre auditeur, et c'est un observateur. Ce type, il écoute. Ainsi, chaque fois que vous lancez cette action, celle-ci sera mise en file d'attente. Nous avons également prédéfini ce type. Ce sera presque la même chose. Film B uniquement. Nous allons recevoir une charge utile, avoir une carte d'identité de film. Ce sera donc une pièce d'identité de film. Il ne s'agira que d'aller chercher des films, pas des films. film. Ce sera un film de tournage. Nous devons forcer cette tâche, le film de chargement de fourche. Nous n'avons rien à faire là-dedans. C'est ce que Saga dot js file. Nous en avons fini avec notre saga chaque fois qu'un grand accent cinématographique est tiré de notre composant. Cet argument a aidé à écouter sur cet axe et ce type. Il s'achèvera avec l'Italie. L'éducation et le tiers promettent et le résolu. Notre générateur va reprendre. Nous en avons fini avec notre service. 17. Page de détails du film: Travaillons maintenant sur cette page qui est un film. Nous devons donc vous apporter l'effet. Maintenant, nous devons également amener US naviguer et utiliser les paramètres Tom ou React routeur. Apportons ça aux États-Unis. Naviguez. Et utilisez Param. Parce que nous avons besoin de l'identifiant que nous avons déjà obtenu à partir de l'URL. Maintenant, nous devons également vous apporter la sélection et l'utiliser disperse de notre React Redux. Nous allons vous apporter la sélection et utiliser l'envoi. Nous devons apporter certains composants de notre composant d'interface utilisateur matérielle pour apporter votre bouton de typographie. Apportons également le style utilisateur. Des styles énormes. Ce commutateur a mosaillé Pi. Nous avons pré-spécifié. L'une d'elles est également intitulée cette page. Permettez-moi de mettre ce fichier JS de dialogue. Nous allons avoir deux sections. section. Je vais copier la tuile pour ce nom de classe de section pour cette tuile que je vais utiliser pour ce x, et vous pouvez copier celle-ci. Revenons maintenant à notre fichier vidéo dot js. Pour la première fois, je vais stocker la référence d'une énorme disparité dans la variable d'expédition. Je vais copier un couple appliquant cette liste de films dot js. Pour copier cette ligne. Nous nous intéressons uniquement à l'objet du film, non pas en mouvement car il contient les détails du film unique. Nous n'avons besoin que d'un film. Maintenant, nous devons créer la force de ces immenses carreaux , appelés avantages. Habituellement, style. Nous avons également besoin de la pièce d'identité. Ils vont nous faire passer des params. Définissons maintenant un effet énorme. Cet effet énorme va courir un mois. Nous avons la carte d'identité. Nous avons la carte d'identité. Ensuite, nous pouvons l'afficher l' action qui est obtenir un film. Et nous devons passer la pièce d'identité. Laissez notre sixième ou la référence des jeunes s'y retrouver. Naviguez dans la variable. Nous pouvons maintenant vérifier celle-ci si nous obtenons ou non les données détaillées du film unique sur l'ID. Allons donc dans le navigateur et combattons. Allons sur cette page, rafraîchissons celle-ci. Cliquons sur n'importe quel film. Voyons leur franchise. Nous allons ouvrir ce film où vous pouvez le voir. Vous pouvez voir que nous avons notre objet film dans lequel nous avons un détail sur ce film. C'est incroyable. C'est un paradigme et nous avons des détails comme directeur de titre dans notre intrigue. Nous allons utiliser certaines informations de cet objet et nous allons afficher sur cette page ce que nous devons faire. Je vais supprimer ça peut faire. Et je vais avoir la section du nom de la classe. Je vais utiliser vos cours de matériaux. Et en fait, je vais utiliser la balise image. Je vais utiliser ici comme affiche de film et en alternative et nous allons fournir le titre du film, le titre du film. Je vais faire une div. Je vais utiliser la typographie. Et alignons la variante gauche. Gardons S3, S2. Ici. Je vais montrer le titre du film, le titre des points. Je vais copier celle-ci quelques fois. Je vais donc dire le titre du film, tracer ce vecteur. D'accord. Copions celui-ci quelques fois. Le moment où je vais utiliser la variante cinq. Mais ici, on peut encore avoir comme le film Dot p ici. Ensuite, je vais utiliser ici le corps un. Ce sera un complot. Maintenant, je vais aussi résoudre le nom du réalisateur, et le voilà à six heures. Allons le retourner six. Réalisateur argenté, réalisateur de films. Et nous pouvons vous donner un réalisateur. Et nous allons également avoir un bouton Retour en arrière. Voyons voir, énorme bouton ayant une variante de retour en arrière que je vais utiliser ici. Et puis je vais avoir la méthode OnClick. Il n'arrivera jamais vers la page d'accueil. Naviguez. Nous pouvons utiliser ici. Enregistrons ce fichier. Allons dans le navigateur. Maintenant, nous sommes en mesure de voir ce film unique avec quelques détails. Nous avons donc le nom du film, l' intrigue et la réalisation. Vous pouvez également ajouter plus de détails selon votre commodité. Je n'utilise que autant de détails sur cette page. Et si nous cliquons sur Retour en arrière, vous n'arriverez jamais à la page d'accueil. Vous pouvez également visionner ce film. Cela fonctionne. Ouvrons ce contrôle. Nous n'avons donc aucun problème dans notre console. 18. Synthèse: Si vous regardez cette vidéo, que lorsque vous aurez terminé ce cours avec succès, j'espère que vous avez tendance à vous intégrer à la boîte à outils redact dans l'application React. Et j'espère que vous avez apprécié le cours avec de nouveaux concepts de redex. Et si vous avez encore des doutes ou des questions relatives à ce cours, vous pouvez toujours placer votre requête ou votre doute dans la section commentaires. Je ferai de mon mieux pour résoudre votre question. C'est donc ça. De mon côté, je vous verrai en réseau.