Nous continuerons à travailler sur l'application que nous avons créée dans le dernier module de cours avec nos recettes ici et avec
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.
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
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
encore, que nous
pouvons voir cette recette comme un favori ici dans l'onglet favoris. Et l'autre chose où nous aurons besoin de Redux
est ici dans les filtres, là où nous définissons un filtre et nous l'enregistrons ensuite, bien sûr,
cela devrait avoir un effet sur les repas que nous chargeons ici dans notre onglet repas dans la liste des repas lorsque nous
sélectionnons une catégorie. Là, cela devrait
être reflété, ce que nous avons mis sur les filtres. Voilà donc ce sur quoi nous travaillons, ce dont nous aurons
besoin pour et pour cela, installons Redux et commençons avec.
Pour commencer avec Redux, je vais quitter mon serveur d'expo ici,
le processus de démarrage de npm, je vais le quitter temporairement et installer
un package et ce serait Redux
et en plus de Redux, nous devons également installer React Redux parce que c'est également nécessaire de travailler ensuite
avec Redux.
Donc, les deux packages doivent être installés ici et pendant leur installation, nous pouvons déjà commencer à travailler
sur nos fichiers de code là-bas un peu parce que dans ce projet, je veux ajouter un nouveau dossier maintenant et
c'est le dossier du magasin.
Maintenant, vous pouvez nommer ce dossier comme vous le souhaitez, il n'a pas besoin d'être nommé magasin,
Redux ne s'en soucie pas, mais c'est le dossier dans lequel je veux gérer ma configuration Redux car Redux concerne tout
ce magasin d'état central.
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
cours complet sur
React et Redux pour cela si vous voulez en apprendre les tenants et aboutissants, par exemple ce
cours, je suppose en fait une connaissance préalable de React et Redux et donc ce ne sera qu'un bref rappel.
Redux à la fin est tout au sujet des réducteurs, des actions et ensuite de la construction d'un magasin basé sur
ces réducteurs et actions.
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
action et un seul fichier de réduction dans ce projet mais si vous aviez plus de fichiers que cela, ayant des
sous-dossiers séparés peuvent être une bonne idée pour le garder organisé et c'est pourquoi je les
crée ici, même si pour cette application simple, nous n'en aurions pas besoin car nous n'aurons pas autant de fichiers.
Commençons par le réducteur. Dans le dossier
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
réducteur de repas.
C'est donc au final le fichier où nous écrirons la logique pour marquer un repas
comme favori et pour gérer nos filtres.
Maintenant, un réducteur dans React est juste une fonction, alors
ici je vais créer une fonction, nommez-le réducteur de repas, le nom dépend entièrement de vous et cette fonction
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
parce qu'un réducteur à la fin devra retourner un nouvel état qui est ensuite pris
par Redux et stocké dans son magasin.
Vous obtenez donc le courant, l'ancien état ici et vous obtenez l'action parce que la fonction de réduction ici
est exécutée par Redux chaque
fois qu'une nouvelle action est envoyée et donc nous avons accès à l'action ici afin que
nous puissions savoir si nous devons agir et ce que nous devons faire.
Donc, à l'intérieur de cette fonction, à la fin, vous devez retourner un nouvel état, dans sa forme
la plus simple, cela signifie bien sûr que nous renvoyons l'état actuel, ce qui, d'autre part,
signifie que ce réducteur ne fait rien d'utile mais nous changer cela.
Maintenant, lorsque nous exécutons notre application pour la première fois, nous voulons également configurer un état
initial qui est utilisé initialement,
donc qui initialise notre état lorsque cette application se lance et pour cela, j'ajouterai ici une nouvelle constante d'état
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
que nous aurons besoin des deux - une liste de tous les repas et une liste des repas qui correspondent aux
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
et
bien sûr, ce n'est qu'une approche possible que vous
pouvez adopter ici, nous pouvons certainement trouver d'autres façons de gérer nos données ici, mais j'aime celle-ci.
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
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.
Les repas filtrés sont également initialisés avec cela car initialement, lorsque cette application
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
de l'application, nous n'aurons aucun repas préféré.
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
revienne plus tard, vous ne recommenciez pas à zéro, mais ce n'est pas quelque
chose que nous ferons ici, vous Je
vais apprendre à tendre la main à un serveur et à y enregistrer des données et à en charger des données dans des
modules séparés plus
tard dans ce cours, ici nous allons garder cela simple pour nous concentrer sur Redux.
Voici donc mon état initial, ici, dans cette fonction, nous pouvons maintenant utiliser une syntaxe Javascript où nous affectons
notre état initial comme valeur par défaut pour l'argument état, ce qui signifie que lorsque cette fonction
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
toute première fois, nous allons commencer
avec cet état initial, donc cela chargera automatiquement
notre état initial pour ainsi dire parce que lorsque Redux démarre et démarre, il y aura une action initiale envoyée
qui est utilisé pour parcourir le réducteur une fois et qui chargera ensuite notre état initial.
Donc, avec cela, nous pouvons travailler avec un état initial qui est bien mais qui en soi ne nous
aide pas trop. Pour le moment, c'est
tout, connectons
maintenant ce réducteur à Redux afin que nous puissions réellement utiliser notre magasin Redux partout dans l'application avant de commencer à répartir
les actions et de faire des choses plus utiles dans le réducteur. Par conséquent, ici pour l'instant, je vais juste
exporter le réducteur de repas par défaut ici et maintenant dans l'application. js qui est le fichier où notre application
entière démarre, nous
devons configurer notre boutique Redux. Pour cela
ici, nous importons create store de Redux.
De plus, nous devrons importer des réducteurs combinés à partir de là.
Cela nous permet maintenant de créer un magasin, nous aurons juste besoin de notre
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
et là, les repas. fichier js et
maintenant peut-être ici, nous pouvons créer notre magasin ici en appelant create store. Maintenant, create store prend un réducteur à la fin
que vous devez transmettre. Maintenant, bien sûr ici, nous avons un réducteur et
nous pourrions le transmettre, mais dans les applications plus grandes, vous pouvez avoir plus d'un réducteur, car
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
zone de support de votre application et vous devez fusionner tous ces réducteurs simples, ces différents réducteurs en un seul
réducteur de racine et c'est ce que fait la fonction de réducteurs combinés, encore
une fois ici, nous n'en aurions pas besoin car nous n'avons qu'un seul réducteur mais pour
vous montrer déjà l'approche que vous
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
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
différents réducteurs en clés.
Ainsi, par exemple ici, nous pourrions prendre les repas comme une clé, mais ce nom dépend entièrement de vous et le
connecter au réducteur de repas, comme celui-ci.
Ce que cela fait, c'est finalement que ce réducteur de repas fusionne dans ce réducteur de racine et nous pourrons plus
tard travailler avec l'état géré par le réducteur de repas, donc avec
cet état qui est initialisé comme ça, à l'aide de ce repas propriété, nous pourrons accéder à
cet état, cette
tranche de l'état avec cette propriété plus tard, mais vous verrez tout cela.
Voilà donc notre réducteur de racine et maintenant nous devons juste passer le réducteur de racine pour créer
un magasin, cela nous donne un magasin et maintenant quoi?
Maintenant, ce magasin doit être fourni à notre application et pour cela, nous avons besoin de
cet autre paquet que nous avons installé qui est React Redux.
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
autour du composant le plus haut qui contient tous les autres composants qui interagiront éventuellement avec notre magasin et
le navigateur de repas est assez bon pour cela car il contient tous
nos écrans, donc il contient tous les composants dont nous aurons éventuellement besoin pour envoyer des
actions
ou accéder à notre état, alors lisez notre état. Par conséquent, ici, nous enroulons le composant fournisseur autour du navigateur de
repas et maintenant le fournisseur prend une propriété importante, un accessoire que vous devez passer et c'est l'accessoire du magasin
et bien sûr là-bas, en tant que valeur, nous transmettons notre magasin ici.
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
tout ce dont nous avons besoin pour interagir avec Redux, avec le magasin Redux dans n'importe quel composant, n'importe
quel écran ou tout autre composant de notre application. .
Maintenant, permettez-moi de redémarrer cela avec npm start et pour le moment, cela ne fera pas
une grande différence, mais notre application devrait
certainement continuer à fonctionner, donc elle ne devrait pas planter à cause de cela, alors vérifions simplement que c'est le cas et recharger ici,
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
sur iOS et je suis assez confiant qu'il se chargera également très bien sur Android, oui ça marche aussi.
Alors maintenant, Redux est installé,
notre magasin est initialisé mais nous ne l'utilisons pas.
Donc, comme prochaine étape, assurons-nous d'utiliser notre magasin avant de prendre soin des actions et de faire
un vrai travail dans le réducteur.