1 00:00:02,250 --> 00:00:08,070 Nous continuerons à travailler sur l'application que nous avons créée dans le dernier module de cours avec nos recettes ici et avec 2 00:00:08,070 --> 00:00:15,070 les filtres que nous pourrions définir et ainsi de suite et il y a deux choses que nous devons ajouter là où nous aurons besoin de Redux. 3 00:00:15,090 --> 00:00:21,870 La première est que nous pouvons réellement marquer une recette comme favorite en cliquant sur cette icône en forme d'étoile, que cela marque en fait 4 00:00:21,870 --> 00:00:27,900 cela comme favori et que nous changeons également cette icône pour montrer si c'est déjà un favori ou non mais plus important 5 00:00:27,900 --> 00:00:28,980 encore, que nous 6 00:00:28,980 --> 00:00:35,400 pouvons voir cette recette comme un favori ici dans l'onglet favoris. Et l'autre chose où nous aurons besoin de Redux 7 00:00:35,400 --> 00:00:41,280 est ici dans les filtres, là où nous définissons un filtre et nous l'enregistrons ensuite, bien sûr, 8 00:00:41,280 --> 00:00:49,080 cela devrait avoir un effet sur les repas que nous chargeons ici dans notre onglet repas dans la liste des repas lorsque nous 9 00:00:49,080 --> 00:00:51,470 sélectionnons une catégorie. Là, cela devrait 10 00:00:51,500 --> 00:00:58,880 être reflété, ce que nous avons mis sur les filtres. Voilà donc ce sur quoi nous travaillons, ce dont nous aurons 11 00:00:58,880 --> 00:01:02,300 besoin pour et pour cela, installons Redux et commençons avec. 12 00:01:03,350 --> 00:01:07,760 Pour commencer avec Redux, je vais quitter mon serveur d'expo ici, 13 00:01:07,760 --> 00:01:12,830 le processus de démarrage de npm, je vais le quitter temporairement et installer 14 00:01:12,860 --> 00:01:15,030 un package et ce serait Redux 15 00:01:15,110 --> 00:01:22,460 et en plus de Redux, nous devons également installer React Redux parce que c'est également nécessaire de travailler ensuite 16 00:01:22,460 --> 00:01:23,760 avec Redux. 17 00:01:23,780 --> 00:01:28,700 Donc, les deux packages doivent être installés ici et pendant leur installation, nous pouvons déjà commencer à travailler 18 00:01:28,700 --> 00:01:34,280 sur nos fichiers de code là-bas un peu parce que dans ce projet, je veux ajouter un nouveau dossier maintenant et 19 00:01:34,280 --> 00:01:35,780 c'est le dossier du magasin. 20 00:01:35,780 --> 00:01:40,810 Maintenant, vous pouvez nommer ce dossier comme vous le souhaitez, il n'a pas besoin d'être nommé magasin, 21 00:01:41,000 --> 00:01:46,970 Redux ne s'en soucie pas, mais c'est le dossier dans lequel je veux gérer ma configuration Redux car Redux concerne tout 22 00:01:46,970 --> 00:01:48,390 ce magasin d'état central. 23 00:01:48,530 --> 00:01:56,150 Donc, ici, dans ce dossier de magasin, nous pouvons maintenant commencer avec Redux et je ne couvrirai pas Redux dans les moindres détails ici, j'ai un 24 00:01:56,150 --> 00:01:57,230 cours complet sur 25 00:01:57,260 --> 00:02:02,510 React et Redux pour cela si vous voulez en apprendre les tenants et aboutissants, par exemple ce 26 00:02:02,570 --> 00:02:08,450 cours, je suppose en fait une connaissance préalable de React et Redux et donc ce ne sera qu'un bref rappel. 27 00:02:09,890 --> 00:02:14,980 Redux à la fin est tout au sujet des réducteurs, des actions et ensuite de la construction d'un magasin basé sur 28 00:02:14,980 --> 00:02:16,010 ces réducteurs et actions. 29 00:02:16,360 --> 00:02:23,230 Maintenant, pour cela ici dans ce dossier de magasin, j'ajouterai un dossier d'actions et j'ajouterai un dossier de réducteurs, en fait nous n'aurons qu'une seule 30 00:02:23,320 --> 00:02:29,320 action et un seul fichier de réduction dans ce projet mais si vous aviez plus de fichiers que cela, ayant des 31 00:02:29,320 --> 00:02:34,180 sous-dossiers séparés peuvent être une bonne idée pour le garder organisé et c'est pourquoi je les 32 00:02:34,180 --> 00:02:39,820 crée ici, même si pour cette application simple, nous n'en aurions pas besoin car nous n'aurons pas autant de fichiers. 33 00:02:39,880 --> 00:02:44,230 Commençons par le réducteur. Dans le dossier 34 00:02:44,350 --> 00:02:52,630 réducteur ici, je vais ajouter mes repas. fichier js et c'est le fichier où je suis allé gérer ma logique de mise à jour de l'état du 35 00:02:52,630 --> 00:02:53,310 réducteur de repas. 36 00:02:53,410 --> 00:02:58,750 C'est donc au final le fichier où nous écrirons la logique pour marquer un repas 37 00:02:58,750 --> 00:03:01,330 comme favori et pour gérer nos filtres. 38 00:03:01,430 --> 00:03:04,700 Maintenant, un réducteur dans React est juste une fonction, alors 39 00:03:04,700 --> 00:03:10,550 ici je vais créer une fonction, nommez-le réducteur de repas, le nom dépend entièrement de vous et cette fonction 40 00:03:10,610 --> 00:03:17,360 recevra en fait deux arguments - l'état, l'instantané de l'état actuel sur lequel vous pouvez construire sur et dériver un nouvel état 41 00:03:17,360 --> 00:03:22,250 parce qu'un réducteur à la fin devra retourner un nouvel état qui est ensuite pris 42 00:03:22,370 --> 00:03:24,860 par Redux et stocké dans son magasin. 43 00:03:24,860 --> 00:03:30,230 Vous obtenez donc le courant, l'ancien état ici et vous obtenez l'action parce que la fonction de réduction ici 44 00:03:30,230 --> 00:03:31,940 est exécutée par Redux chaque 45 00:03:31,940 --> 00:03:36,710 fois qu'une nouvelle action est envoyée et donc nous avons accès à l'action ici afin que 46 00:03:36,710 --> 00:03:40,370 nous puissions savoir si nous devons agir et ce que nous devons faire. 47 00:03:40,520 --> 00:03:44,960 Donc, à l'intérieur de cette fonction, à la fin, vous devez retourner un nouvel état, dans sa forme 48 00:03:44,960 --> 00:03:49,220 la plus simple, cela signifie bien sûr que nous renvoyons l'état actuel, ce qui, d'autre part, 49 00:03:49,220 --> 00:03:52,470 signifie que ce réducteur ne fait rien d'utile mais nous changer cela. 50 00:03:52,650 --> 00:03:58,170 Maintenant, lorsque nous exécutons notre application pour la première fois, nous voulons également configurer un état 51 00:03:58,170 --> 00:04:00,000 initial qui est utilisé initialement, 52 00:04:00,000 --> 00:04:06,510 donc qui initialise notre état lorsque cette application se lance et pour cela, j'ajouterai ici une nouvelle constante d'état 53 00:04:06,510 --> 00:04:14,970 initial qui contient un simple Javascript objet et là-dedans, je veux stocker une liste de mes repas, puis aussi une liste de mes repas filtrés parce 54 00:04:15,120 --> 00:04:22,060 que nous aurons besoin des deux - une liste de tous les repas et une liste des repas qui correspondent aux 55 00:04:22,060 --> 00:04:31,130 filtres définis par l'utilisateur et je veux aussi avoir mes repas préférés ici. Donc, trois types de tableaux de repas que je stocke à la fin 56 00:04:31,130 --> 00:04:31,610 et 57 00:04:31,670 --> 00:04:34,800 bien sûr, ce n'est qu'une approche possible que vous 58 00:04:34,830 --> 00:04:40,340 pouvez adopter ici, nous pouvons certainement trouver d'autres façons de gérer nos données ici, mais j'aime celle-ci. 59 00:04:40,590 --> 00:04:53,140 Maintenant, ce dont j'ai besoin dans ce fichier, ce sont les données factices de mes repas, donc j'importe des repas à partir de mon dossier de données 60 00:04:53,140 --> 00:04:59,860 et là à partir des données factices. fichier js et je vais initialiser les repas ici avec mon tableau de données factices de repas. 61 00:05:00,550 --> 00:05:06,220 Les repas filtrés sont également initialisés avec cela car initialement, lorsque cette application 62 00:05:06,330 --> 00:05:11,840 démarre, nous n'avons pas de filtres. Les plats préférés, d'autre part, sont initialement un tableau vide, car à nouveau au démarrage 63 00:05:11,840 --> 00:05:13,130 de l'application, nous n'aurons aucun repas préféré. 64 00:05:13,130 --> 00:05:18,230 Bien sûr, dans une vraie application, vous voudrez peut-être stocker cet état sur un serveur, afin que lorsque l'utilisateur ferme l'application et 65 00:05:18,230 --> 00:05:21,400 revienne plus tard, vous ne recommenciez pas à zéro, mais ce n'est pas quelque 66 00:05:21,470 --> 00:05:23,230 chose que nous ferons ici, vous Je 67 00:05:23,240 --> 00:05:28,580 vais apprendre à tendre la main à un serveur et à y enregistrer des données et à en charger des données dans des 68 00:05:28,610 --> 00:05:29,440 modules séparés plus 69 00:05:29,460 --> 00:05:33,040 tard dans ce cours, ici nous allons garder cela simple pour nous concentrer sur Redux. 70 00:05:33,140 --> 00:05:39,170 Voici donc mon état initial, ici, dans cette fonction, nous pouvons maintenant utiliser une syntaxe Javascript où nous affectons 71 00:05:39,230 --> 00:05:44,690 notre état initial comme valeur par défaut pour l'argument état, ce qui signifie que lorsque cette fonction 72 00:05:44,690 --> 00:05:51,290 de réduction s'exécute et que l'état n'est pas défini, ce qui est le cas lorsque Redux exécute notre réducteur pour la 73 00:05:51,590 --> 00:05:53,700 toute première fois, nous allons commencer 74 00:05:53,750 --> 00:05:56,330 avec cet état initial, donc cela chargera automatiquement 75 00:05:56,330 --> 00:06:02,760 notre état initial pour ainsi dire parce que lorsque Redux démarre et démarre, il y aura une action initiale envoyée 76 00:06:02,790 --> 00:06:07,910 qui est utilisé pour parcourir le réducteur une fois et qui chargera ensuite notre état initial. 77 00:06:07,980 --> 00:06:14,160 Donc, avec cela, nous pouvons travailler avec un état initial qui est bien mais qui en soi ne nous 78 00:06:14,160 --> 00:06:16,190 aide pas trop. Pour le moment, c'est 79 00:06:16,200 --> 00:06:17,070 tout, connectons 80 00:06:17,250 --> 00:06:23,640 maintenant ce réducteur à Redux afin que nous puissions réellement utiliser notre magasin Redux partout dans l'application avant de commencer à répartir 81 00:06:23,640 --> 00:06:30,860 les actions et de faire des choses plus utiles dans le réducteur. Par conséquent, ici pour l'instant, je vais juste 82 00:06:30,860 --> 00:06:39,890 exporter le réducteur de repas par défaut ici et maintenant dans l'application. js qui est le fichier où notre application 83 00:06:39,890 --> 00:06:42,190 entière démarre, nous 84 00:06:42,230 --> 00:06:47,960 devons configurer notre boutique Redux. Pour cela 85 00:06:48,080 --> 00:06:57,270 ici, nous importons create store de Redux. 86 00:06:57,510 --> 00:07:02,010 De plus, nous devrons importer des réducteurs combinés à partir de là. 87 00:07:02,010 --> 00:07:06,090 Cela nous permet maintenant de créer un magasin, nous aurons juste besoin de notre 88 00:07:06,090 --> 00:07:12,610 réducteur, alors ici, j'importe mon réducteur de repas à partir de maintenant et pointerai vers le dossier du magasin, le dossier des réducteurs 89 00:07:12,610 --> 00:07:15,280 et là, les repas. fichier js et 90 00:07:15,330 --> 00:07:26,520 maintenant peut-être ici, nous pouvons créer notre magasin ici en appelant create store. Maintenant, create store prend un réducteur à la fin 91 00:07:26,640 --> 00:07:31,910 que vous devez transmettre. Maintenant, bien sûr ici, nous avons un réducteur et 92 00:07:31,920 --> 00:07:36,780 nous pourrions le transmettre, mais dans les applications plus grandes, vous pouvez avoir plus d'un réducteur, car 93 00:07:36,780 --> 00:07:43,710 vous avez souvent des réducteurs pour les différentes fonctionnalités de votre application, un pour l'authentification, un pour vos produits, un pour disons la 94 00:07:43,710 --> 00:07:49,740 zone de support de votre application et vous devez fusionner tous ces réducteurs simples, ces différents réducteurs en un seul 95 00:07:49,800 --> 00:07:53,970 réducteur de racine et c'est ce que fait la fonction de réducteurs combinés, encore 96 00:07:54,000 --> 00:07:58,800 une fois ici, nous n'en aurions pas besoin car nous n'avons qu'un seul réducteur mais pour 97 00:07:58,800 --> 00:08:01,060 vous montrer déjà l'approche que vous 98 00:08:01,140 --> 00:08:07,890 pouvez également utiliser avec plusieurs réducteurs, je vais également l'utiliser ici. Je vais donc avoir mon réducteur racine ici que je crée 99 00:08:07,890 --> 00:08:14,460 en appelant les réducteurs combinés, les réducteurs combinés prennent un objet Javascript où nous mappons maintenant nos réducteurs simples, nos 100 00:08:14,460 --> 00:08:16,130 différents réducteurs en clés. 101 00:08:16,130 --> 00:08:21,870 Ainsi, par exemple ici, nous pourrions prendre les repas comme une clé, mais ce nom dépend entièrement de vous et le 102 00:08:22,740 --> 00:08:24,900 connecter au réducteur de repas, comme celui-ci. 103 00:08:24,900 --> 00:08:32,760 Ce que cela fait, c'est finalement que ce réducteur de repas fusionne dans ce réducteur de racine et nous pourrons plus 104 00:08:32,760 --> 00:08:37,380 tard travailler avec l'état géré par le réducteur de repas, donc avec 105 00:08:37,380 --> 00:08:43,440 cet état qui est initialisé comme ça, à l'aide de ce repas propriété, nous pourrons accéder à 106 00:08:43,440 --> 00:08:44,900 cet état, cette 107 00:08:44,910 --> 00:08:49,630 tranche de l'état avec cette propriété plus tard, mais vous verrez tout cela. 108 00:08:49,740 --> 00:08:54,780 Voilà donc notre réducteur de racine et maintenant nous devons juste passer le réducteur de racine pour créer 109 00:08:54,780 --> 00:08:57,900 un magasin, cela nous donne un magasin et maintenant quoi? 110 00:08:57,900 --> 00:09:03,210 Maintenant, ce magasin doit être fourni à notre application et pour cela, nous avons besoin de 111 00:09:03,240 --> 00:09:06,960 cet autre paquet que nous avons installé qui est React Redux. 112 00:09:07,170 --> 00:09:18,300 De là, nous pouvons importer le composant fournisseur, fournisseur comme celui-ci. Nous enroulons ensuite le fournisseur autour de notre composant d'application racine à la fin, donc 113 00:09:18,390 --> 00:09:25,200 autour du composant le plus haut qui contient tous les autres composants qui interagiront éventuellement avec notre magasin et 114 00:09:25,200 --> 00:09:30,000 le navigateur de repas est assez bon pour cela car il contient tous 115 00:09:30,060 --> 00:09:35,960 nos écrans, donc il contient tous les composants dont nous aurons éventuellement besoin pour envoyer des 116 00:09:35,960 --> 00:09:36,420 actions 117 00:09:36,480 --> 00:09:44,230 ou accéder à notre état, alors lisez notre état. Par conséquent, ici, nous enroulons le composant fournisseur autour du navigateur de 118 00:09:44,230 --> 00:09:50,440 repas et maintenant le fournisseur prend une propriété importante, un accessoire que vous devez passer et c'est l'accessoire du magasin 119 00:09:50,680 --> 00:09:54,590 et bien sûr là-bas, en tant que valeur, nous transmettons notre magasin ici. 120 00:09:54,640 --> 00:10:01,660 Donc, ce magasin constant qui contient le magasin créé est transmis au fournisseur d'accessoires de magasin et en arrière-plan, cela nous donne 121 00:10:01,660 --> 00:10:07,990 tout ce dont nous avons besoin pour interagir avec Redux, avec le magasin Redux dans n'importe quel composant, n'importe 122 00:10:08,050 --> 00:10:11,520 quel écran ou tout autre composant de notre application. . 123 00:10:13,360 --> 00:10:18,630 Maintenant, permettez-moi de redémarrer cela avec npm start et pour le moment, cela ne fera pas 124 00:10:18,630 --> 00:10:21,430 une grande différence, mais notre application devrait 125 00:10:21,430 --> 00:10:29,140 certainement continuer à fonctionner, donc elle ne devrait pas planter à cause de cela, alors vérifions simplement que c'est le cas et recharger ici, 126 00:10:29,170 --> 00:10:38,370 nous appuyons deux fois sur r sur Android et commandons r sur iOS et voyons où cela se charge toujours comme il se doit, oui cela semble bon ici 127 00:10:38,730 --> 00:10:44,860 sur iOS et je suis assez confiant qu'il se chargera également très bien sur Android, oui ça marche aussi. 128 00:10:44,890 --> 00:10:46,890 Alors maintenant, Redux est installé, 129 00:10:46,900 --> 00:10:49,990 notre magasin est initialisé mais nous ne l'utilisons pas. 130 00:10:49,990 --> 00:10:54,520 Donc, comme prochaine étape, assurons-nous d'utiliser notre magasin avant de prendre soin des actions et de faire 131 00:10:54,520 --> 00:10:56,200 un vrai travail dans le réducteur.