Pour configurer Redux, je suivrai la même approche que je l'ai fait plus tôt dans le
cours, j'ajouterai un dossier de magasin et là-bas, j'aurai mes places-action. fichier js et mon réducteur de places. fichier js.
C'est bien sûr un
peu différent qu'auparavant, j'avais là un sous-dossier d'actions et de
réducteurs, vous pouvez absolument faire la même
chose ici, car je n'ai qu'une seule action et un seul réducteur, je garderai cela
dans deux fichiers mais vous pourriez
avoir sous-dossiers et ainsi de suite, cela dépend entièrement de vous. Maintenant, dans le réducteur de lieux, je vais définir à quoi devrait ressembler
mon état pour cette partie de mon état total et ce
sera très simple, mon état initial ici est juste un objet Javascript où je veux avoir une clé de lieux vide
, un tableau vide au début parce que j'aurai un tableau de lieux et c'est tout.
Donc donc ici, je peux exporter cette fonction de réduction qui prend un état qui est réglé sur l'état initial si
aucun
autre état n'est passé et une action et là pour l'instant, je vais juste retourner cet état, bientôt bien sûr nous ' ll ajoutera une logique
pour gérer différentes actions et par exemple, ajoutera un nouvel endroit. Dans le fichier d'actions des lieux, j'exporterai une nouvelle
constante, ajouterai un espace, c'est-à-dire un identifiant d'action dont j'aurai besoin et j'ajouterai une fonction de créateur d'action, ajoutera un lieu, qui devrait
prendre des données sur le lieu et pour le moment, c'est juste le titre, plus tard ce sera
plus et ici je veux retourner mon
objet d'action alors où
le type est ajouter un lieu et où j'ai juste mes données de lieu disons qui pour le moment
n'est bien sûr composé que de le titre mais plus tard encore, ce sera plus.
C'est l'application Redux de base, maintenant bien sûr dans l'application. js
nous devons tout câbler. Donc, comme vous l'avez appris dans ce cours, nous
pouvons importer quelque chose de Redux et aussi de React Redux et également importer Redux Thunk de Redux Thunk, donc à partir de ce paquet, nous
avons également installé. Maintenant, depuis Redux, nous
devons créer un magasin et combiner des réducteurs et également appliquer un middleware pour appliquer Redux Thunk et de React Redux,
nous avons besoin de ce composant fournisseur et avec
cela, tout comme nous l'avons fait plusieurs fois au cours, nous pouvons créer notre réducteur de racine
à l'aide de réducteurs combinés.
Cela prend un objet où nous fusionnons tous les réducteurs
ensemble, maintenant nous n'avons évidemment qu'un seul réducteur ici et c'est le réducteur de lieux que nous importons du dossier de
magasin et là, c'est le fichier de réduction de lieux mais bien sûr,
vous pourriez avoir plus de réducteurs dans votre application et je mapperai ceci à des lieux, afin que le réducteur de
lieux soit mappé à l'identifiant des lieux ici.
Maintenant, avec cela, nous pouvons créer notre magasin avec la fonction create store et cette fonction prend le réducteur racine et nous
pouvons également passer un deuxième argument où nous appelons apply middleware et passons Redux Thunk à cette fonction afin que le package
Redux Thunk soit gentil de branché sur notre flux Redux ici. Avec tout cela mis en place, nous pouvons encapsuler
notre navigateur de lieux avec le composant fournisseur car chaque écran de notre application, dans notre navigateur, devrait avoir accès au magasin
et au fournisseur, nous passons le magasin via l'accessoire de magasin et c'est le Redux configuration,
nous avons également vu plusieurs fois tout au long de ce cours. Avec Redux configuré, nous pouvons aller au nouvel écran de lieu et nous
assurer qu'ici, dans le gestionnaire de lieu de sauvegarde qui est déclenché lorsque nous cliquons sur ce
bouton, nous ajoutons en fait un nouvel endroit qui, pour le moment, ne se compose que de son titre mais
de bien sûr, cela va changer tout au long de ce cours. Pour ce faire, nous pouvons importer use dispatch à partir de
React Redux et simplement accéder à la fonction de répartition en exécutant use dispatch là-haut et également bien
sûr importer notre action, par exemple à nouveau en utilisant cette syntaxe de fusion d'importation ici, avec tout
importer en tant que lieux les actions du magasin et de là, le fichier d'actions des lieux et avec cela, nous pouvons aller pour sauver le gestionnaire de
lieux, appeler la répartition ici et les actions de répartition des lieux ajouter la place et transférer le titre qui est bien
sûr stocké dans notre valeur de titre, donc ici . Maintenant, avec cela, nous pourrons envoyer cette action, dans le
réducteur d'endroits, nous pouvons maintenant changer
notre type d'action ou utiliser si vérifie bien sûr et rechercher l'état ou l'action d'ajout que nous importons des actions de lieux, ajoutez également le cas par défaut par la façon dont
nous renvoyons simplement l'état et donc nous pouvons nous débarrasser de cette déclaration de retour
là-bas et maintenant si ajouter un endroit est ce que nous avons obtenu, eh bien
nous pouvons
créer un nouvel endroit ici et pour cela, également comme avant dans ce cours, je vais ajouter
un dossier de modèles avec une place. fichier js là où je veux définir à quoi devrait
ressembler un lieu dans cette application, simplement pour avoir un moyen facile de créer de nouveaux objets de lieu qui
sont toujours les mêmes.
Alors ici, je vais créer une classe et l'exporter en tant que fichier par défaut et maintenant bien sûr, c'est à vous de voir à quoi vous
voulez ressembler, je définirai la mienne avec l'aide du constructeur pour avoir un ID et un titre et plus tard
nous ajouterons
plus mais pour l'instant,
c'est tout et je vais
stocker mon ID ici et je stocke mon titre ici dans une propriété. Avec cela, nous avons un plan pour de nouveaux
endroits, de retour dans le réducteur de lieux, nous pouvons maintenant
l'utiliser.
Donc là on peut importer de la place depuis le dossier des modèles et là, la place. fichier js puis ici, créez un nouvel endroit en appelant un nouvel endroit,
donc en initialisant ou en instanciant un nouvel endroit
en fonction de notre classe et pour l'ID, je vais pour le moment utiliser un ID fictif de l'horodatage de
la date actuelle et du Le titre est bien sûr quelque chose que nous pouvons définir car cela fait partie de notre action,
là à la place des données, nous aurons une propriété title qui contient le titre défini
par l'utilisateur, alors ici,
je peux le définir sur action. placeData. Titre.
Cela crée un nouvel objet de lieu
et maintenant nous pouvons retourner un nouvel état ici où les lieux et je n'ai pas besoin de copier l'ancien état parce que je n'ai
rien d'autre dans mon état ici et je n'ajouterai rien donc je peux simplement retourner un tout nouvel objet d'État, où les
lieux sont désormais d'État. des endroits. concat, de sorte que prend
l'ancien tableau, ajoute un nouvel élément et renvoie un tout nouveau tableau qui remplace l'ancien tableau ici
dans notre état
et je concate mon nouvel endroit bien sûr. Avec cela, nous devrions avoir une liste des endroits que nous gérons. Dans la prochaine conférence, nous pouvons maintenant nous
soucier de
la sortie ici sur l'écran de la liste des lieux. Juste une autre chose, lorsque nous ajoutons un nouveau
lieu ici en cliquant sur le gestionnaire de lieu
de sauvegarde, je veux également revenir à l'écran de
la liste des lieux, donc ici après avoir envoyé cette action, j'utiliserai la navigation des accessoires pour revenir en arrière, donc pour revenir à
l'écran de la liste des lieux. Et maintenant, travaillons sur cet écran de liste de lieux et assurons-nous de
produire une liste de lieux là-bas.