1
00:00:02,290 --> 00:00:05,850
Pour configurer Redux, je suivrai la même approche que je l'ai fait plus tôt dans le

2
00:00:05,950 --> 00:00:14,470
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.

3
00:00:14,470 --> 00:00:16,310
C'est bien sûr un

4
00:00:16,330 --> 00:00:19,310
peu différent qu'auparavant, j'avais là un sous-dossier d'actions et de

5
00:00:19,390 --> 00:00:21,520
réducteurs, vous pouvez absolument faire la même

6
00:00:21,520 --> 00:00:25,950
chose ici, car je n'ai qu'une seule action et un seul réducteur, je garderai cela

7
00:00:25,960 --> 00:00:27,820
dans deux fichiers mais vous pourriez

8
00:00:27,820 --> 00:00:34,840
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

9
00:00:34,840 --> 00:00:37,990
mon état pour cette partie de mon état total et ce

10
00:00:37,990 --> 00:00:43,510
sera très simple, mon état initial ici est juste un objet Javascript où je veux avoir une clé de lieux vide

11
00:00:43,510 --> 00:00:47,810
, un tableau vide au début parce que j'aurai un tableau de lieux et c'est tout.

12
00:00:47,830 --> 00:00:53,830
Donc donc ici, je peux exporter cette fonction de réduction qui prend un état qui est réglé sur l'état initial si

13
00:00:53,830 --> 00:00:54,190
aucun

14
00:00:54,190 --> 00:01:01,450
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

15
00:01:01,450 --> 00:01:08,320
pour gérer différentes actions et par exemple, ajoutera un nouvel endroit. Dans le fichier d'actions des lieux, j'exporterai une nouvelle

16
00:01:08,320 --> 00:01:16,890
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

17
00:01:16,890 --> 00:01:23,640
prendre des données sur le lieu et pour le moment, c'est juste le titre, plus tard ce sera

18
00:01:23,640 --> 00:01:26,290
plus et ici je veux retourner mon

19
00:01:26,290 --> 00:01:28,420
objet d'action alors où

20
00:01:28,420 --> 00:01:35,560
le type est ajouter un lieu et où j'ai juste mes données de lieu disons qui pour le moment

21
00:01:35,560 --> 00:01:41,200
n'est bien sûr composé que de le titre mais plus tard encore, ce sera plus.

22
00:01:41,260 --> 00:01:43,630
C'est l'application Redux de base, maintenant bien sûr dans l'application. js

23
00:01:43,660 --> 00:01:50,670
nous devons tout câbler. Donc, comme vous l'avez appris dans ce cours, nous

24
00:01:51,280 --> 00:02:02,010
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

25
00:02:02,040 --> 00:02:05,160
avons également installé. Maintenant, depuis Redux, nous

26
00:02:05,160 --> 00:02:12,270
devons créer un magasin et combiner des réducteurs et également appliquer un middleware pour appliquer Redux Thunk et de React Redux,

27
00:02:12,270 --> 00:02:15,210
nous avons besoin de ce composant fournisseur et avec

28
00:02:15,690 --> 00:02:21,240
cela, tout comme nous l'avons fait plusieurs fois au cours, nous pouvons créer notre réducteur de racine

29
00:02:21,240 --> 00:02:23,120
à l'aide de réducteurs combinés.

30
00:02:23,130 --> 00:02:26,370
Cela prend un objet où nous fusionnons tous les réducteurs

31
00:02:26,370 --> 00:02:33,090
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

32
00:02:33,090 --> 00:02:37,140
magasin et là, c'est le fichier de réduction de lieux mais bien sûr,

33
00:02:37,140 --> 00:02:43,680
vous pourriez avoir plus de réducteurs dans votre application et je mapperai ceci à des lieux, afin que le réducteur de

34
00:02:43,710 --> 00:02:46,690
lieux soit mappé à l'identifiant des lieux ici.

35
00:02:46,890 --> 00:02:53,460
Maintenant, avec cela, nous pouvons créer notre magasin avec la fonction create store et cette fonction prend le réducteur racine et nous

36
00:02:53,490 --> 00:03:00,300
pouvons également passer un deuxième argument où nous appelons apply middleware et passons Redux Thunk à cette fonction afin que le package

37
00:03:00,330 --> 00:03:07,800
Redux Thunk soit gentil de branché sur notre flux Redux ici. Avec tout cela mis en place, nous pouvons encapsuler

38
00:03:07,800 --> 00:03:15,810
notre navigateur de lieux avec le composant fournisseur car chaque écran de notre application, dans notre navigateur, devrait avoir accès au magasin

39
00:03:15,810 --> 00:03:21,750
et au fournisseur, nous passons le magasin via l'accessoire de magasin et c'est le Redux configuration,

40
00:03:21,750 --> 00:03:30,160
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

41
00:03:30,160 --> 00:03:35,380
assurer qu'ici, dans le gestionnaire de lieu de sauvegarde qui est déclenché lorsque nous cliquons sur ce

42
00:03:35,380 --> 00:03:41,530
bouton, nous ajoutons en fait un nouvel endroit qui, pour le moment, ne se compose que de son titre mais

43
00:03:41,530 --> 00:03:49,450
de bien sûr, cela va changer tout au long de ce cours. Pour ce faire, nous pouvons importer use dispatch à partir de

44
00:03:50,730 --> 00:03:57,300
React Redux et simplement accéder à la fonction de répartition en exécutant use dispatch là-haut et également bien

45
00:03:57,390 --> 00:04:03,930
sûr importer notre action, par exemple à nouveau en utilisant cette syntaxe de fusion d'importation ici, avec tout

46
00:04:04,380 --> 00:04:14,370
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

47
00:04:14,370 --> 00:04:21,960
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

48
00:04:21,960 --> 00:04:29,500
sûr stocké dans notre valeur de titre, donc ici . Maintenant, avec cela, nous pourrons envoyer cette action, dans le

49
00:04:29,650 --> 00:04:32,170
réducteur d'endroits, nous pouvons maintenant changer

50
00:04:32,170 --> 00:04:44,400
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

51
00:04:44,400 --> 00:04:50,400
nous renvoyons simplement l'état et donc nous pouvons nous débarrasser de cette déclaration de retour

52
00:04:50,400 --> 00:04:56,160
là-bas et maintenant si ajouter un endroit est ce que nous avons obtenu, eh bien

53
00:04:56,220 --> 00:04:57,240
nous pouvons

54
00:04:57,930 --> 00:05:04,260
créer un nouvel endroit ici et pour cela, également comme avant dans ce cours, je vais ajouter

55
00:05:04,260 --> 00:05:10,290
un dossier de modèles avec une place. fichier js là où je veux définir à quoi devrait

56
00:05:10,290 --> 00:05:15,900
ressembler un lieu dans cette application, simplement pour avoir un moyen facile de créer de nouveaux objets de lieu qui

57
00:05:15,900 --> 00:05:17,190
sont toujours les mêmes.

58
00:05:17,190 --> 00:05:24,510
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

59
00:05:24,510 --> 00:05:30,180
voulez ressembler, je définirai la mienne avec l'aide du constructeur pour avoir un ID et un titre et plus tard

60
00:05:30,570 --> 00:05:31,460
nous ajouterons

61
00:05:31,530 --> 00:05:32,670
plus mais pour l'instant,

62
00:05:32,670 --> 00:05:34,020
c'est tout et je vais

63
00:05:34,230 --> 00:05:41,280
stocker mon ID ici et je stocke mon titre ici dans une propriété. Avec cela, nous avons un plan pour de nouveaux

64
00:05:41,280 --> 00:05:45,390
endroits, de retour dans le réducteur de lieux, nous pouvons maintenant

65
00:05:45,630 --> 00:05:46,440
l'utiliser.

66
00:05:46,440 --> 00:05:55,170
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,

67
00:05:55,170 --> 00:05:58,080
donc en initialisant ou en instanciant un nouvel endroit

68
00:05:58,080 --> 00:06:04,560
en fonction de notre classe et pour l'ID, je vais pour le moment utiliser un ID fictif de l'horodatage de

69
00:06:04,560 --> 00:06:12,050
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,

70
00:06:12,060 --> 00:06:17,130
là à la place des données, nous aurons une propriété title qui contient le titre défini

71
00:06:17,130 --> 00:06:18,720
par l'utilisateur, alors ici,

72
00:06:18,720 --> 00:06:24,630
je peux le définir sur action. placeData. Titre.

73
00:06:24,630 --> 00:06:26,530
Cela crée un nouvel objet de lieu

74
00:06:26,670 --> 00:06:33,600
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

75
00:06:33,600 --> 00:06:39,480
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

76
00:06:39,900 --> 00:06:44,020
lieux sont désormais d'État. des endroits. concat, de sorte que prend

77
00:06:44,040 --> 00:06:49,710
l'ancien tableau, ajoute un nouvel élément et renvoie un tout nouveau tableau qui remplace l'ancien tableau ici

78
00:06:49,710 --> 00:06:51,050
dans notre état

79
00:06:51,300 --> 00:06:59,310
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

80
00:06:59,310 --> 00:07:00,220
soucier de

81
00:07:00,240 --> 00:07:06,390
la sortie ici sur l'écran de la liste des lieux. Juste une autre chose, lorsque nous ajoutons un nouveau

82
00:07:06,390 --> 00:07:09,310
lieu ici en cliquant sur le gestionnaire de lieu

83
00:07:09,390 --> 00:07:12,560
de sauvegarde, je veux également revenir à l'écran de

84
00:07:12,570 --> 00:07:20,610
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 à

85
00:07:20,610 --> 00:07:25,530
l'écran de la liste des lieux. Et maintenant, travaillons sur cet écran de liste de lieux et assurons-nous de

86
00:07:25,530 --> 00:07:26,760
produire une liste de lieux là-bas.