1
00:00:02,290 --> 00:00:08,140
Notre approche ici fonctionne bien sûr. Nous stockons les entrées dans un certain état,

2
00:00:08,140 --> 00:00:16,090
nous stockons la validité dans un certain état et nous pourrions faire cette gestion de validité pour toutes nos entrées ici et simplement

3
00:00:16,120 --> 00:00:21,370
avoir nos différentes fonctions de gestionnaire de changement ici pour nos différentes entrées, cela fonctionnerait.

4
00:00:21,370 --> 00:00:26,560
Une remarque importante en passant avant de passer à autre chose, puisque je vérifie la validité du titre ici

5
00:00:26,770 --> 00:00:29,950
dans le gestionnaire de soumission, bien sûr, nous devons également l'ajouter

6
00:00:29,950 --> 00:00:35,820
ici en tant que dépendance, donc le titre est valide doit être ajouté là en tant que dépendance dans le rappel d'utilisation

7
00:00:35,830 --> 00:00:36,980
tableau de dépendances,

8
00:00:37,030 --> 00:00:40,570
c'est important, sinon cette fonction ne sera pas reconstruite lorsque cette validité changera,

9
00:00:40,660 --> 00:00:47,970
ce qui signifie que nous ne pourrons plus la soumettre par la suite. Le problème avec notre approche actuelle est que

10
00:00:47,970 --> 00:00:55,410
nous gérons différents états pour stocker l'entrée pour les différentes entrées, puis nous avons également des états de validité

11
00:00:55,410 --> 00:01:00,910
différents, du moins potentiellement si nous commençons à gérer notre validité, comme ceci et

12
00:01:00,990 --> 00:01:07,400
pour de très grandes formes, bien sûr, cela signifie beaucoup de copier-coller, beaucoup de gestion de l'État.

13
00:01:07,410 --> 00:01:15,300
Maintenant, si vous avez autant d'états qui sont en quelque sorte connectés, vous pouvez également le faire de manière plus

14
00:01:15,330 --> 00:01:18,500
élégante, au lieu d'avoir vos états séparés pour

15
00:01:18,540 --> 00:01:25,720
chaque entrée, vous pouvez avoir un grand état qui fusionne toutes les valeurs d'entrée et qui fusionne toutes

16
00:01:25,740 --> 00:01:33,720
les validités puis utilisez un concept appelé réducteur, pas un réducteur Redux mais un supporté par React out pour gérer

17
00:01:33,720 --> 00:01:34,710
cet état.

18
00:01:34,710 --> 00:01:40,210
Vous faites cela avec le crochet d'utilisation du réducteur qui n'a encore rien à voir avec Redux, le

19
00:01:40,440 --> 00:01:47,550
concept d'un réducteur n'est pas exclusif à Redux, un réducteur à la fin n'est qu'une fonction qui prend des entrées et crache des

20
00:01:47,580 --> 00:01:52,800
sorties et donc React prend également en charge ce et vous verrez comment vous pouvez l'utiliser dans

21
00:01:52,920 --> 00:01:54,190
cette conférence maintenant.

22
00:01:54,900 --> 00:01:57,510
Alors, quelle est l'idée d'un réducteur? Maintenant, il est important de comprendre

23
00:01:57,510 --> 00:02:03,030
que l'utilisation du réducteur est un crochet qui vous aide à gérer l'état. Généralement, vous l'utilisez si vous avez des

24
00:02:03,090 --> 00:02:09,420
états connectés ou un état plus complexe et que vous ne voulez pas avoir un tas d'appels d'état

25
00:02:09,600 --> 00:02:16,340
d'utilisation individuelle et un tas d'états individuels que vous gérez. Vous pouvez ensuite utiliser use reducer et voici comment

26
00:02:16,350 --> 00:02:17,510
cela fonctionne.

27
00:02:19,060 --> 00:02:25,530
Vous commencez par créer un réducteur, disons un réducteur de formulaire ici, vous pouvez le nommer comme vous le souhaitez et veuillez noter que je

28
00:02:25,570 --> 00:02:29,020
le crée en dehors de mon composant de formulaire, vous pouvez le faire

29
00:02:29,020 --> 00:02:33,940
là-dedans mais si vous ne dépendez pas des accessoires, vous peut le faire en dehors de là pour que

30
00:02:33,940 --> 00:02:39,250
cela ne se reconstruise pas à chaque cycle de re-rendu et que vous n'ayez même pas à utiliser use callback qui

31
00:02:39,280 --> 00:02:44,110
bien sûr coûte aussi des performances si vous l'utilisez. Donc utilisez-le en dehors de là,

32
00:02:44,110 --> 00:02:49,690
construisez-le en dehors de là pour éviter les recréations inutiles de cette fonction et maintenant le réducteur, tout

33
00:02:49,690 --> 00:02:57,100
comme un réducteur Redux obtient l'état actuel et une action mais encore une fois ce n'est pas lié à Redux, il n'est pas utilisé

34
00:02:57,360 --> 00:03:02,240
par Redux, le réducteur fonctionne toujours comme ça. Maintenant là-dedans, encore une fois comme dans

35
00:03:02,310 --> 00:03:07,260
un réducteur Redux, car encore une fois, ils fonctionnent comme ça, vous pouvez vérifier différents

36
00:03:07,260 --> 00:03:11,520
types d'actions et ici je veux vérifier un type, cela aussi bien utiliser

37
00:03:11,520 --> 00:03:12,680
une instruction if,

38
00:03:12,690 --> 00:03:15,440
vous pouvez utiliser une instruction switch case aussi

39
00:03:15,750 --> 00:03:19,260
et que je vérifie l'action. taper ici dépend entièrement de

40
00:03:19,290 --> 00:03:24,030
moi, vous pouvez nommer ce que vous voulez parce que vous serez celui qui enverra l'action

41
00:03:24,030 --> 00:03:29,800
plus tard et ici je vérifie l'action de mise à jour qui est également un identifiant que j'ai choisi et

42
00:03:29,820 --> 00:03:39,050
qui, tout comme dans Redux, vous pouvez également stockez cet identifiant dans une constante autonome ici, afin que vous puissiez avoir votre action de mise à jour du réducteur ici par exemple,

43
00:03:39,620 --> 00:03:45,850
votre identifiant de mise à jour du réducteur comme celui-ci et l'utiliser à la place ici si vous le souhaitez et

44
00:03:45,920 --> 00:03:48,260
vous pouvez le nommer comme vous le souhaitez.

45
00:03:48,380 --> 00:03:57,180
Alors maintenant, je vérifie cette action et si cette action se produit, je veux stocker une valeur d'entrée et la valider mais pour comprendre cela, nous

46
00:03:57,340 --> 00:04:00,850
devons comprendre comment nous utilisons le réducteur de forme.

47
00:04:00,920 --> 00:04:05,510
Donc, laissons-le comme ça pour le moment et descendons vers le composant lui-même, là,

48
00:04:05,600 --> 00:04:08,950
nous commençons à configurer notre état de forme ici, donc

49
00:04:08,960 --> 00:04:15,200
ici, je veux appeler l'utilisateur réducteur et maintenant utiliser réducteur prendre une telle fonction de réducteur, donc je passerai

50
00:04:15,200 --> 00:04:19,540
mon réducteur de forme que j'ai installé ici et qui est encore inachevé.

51
00:04:19,940 --> 00:04:24,990
Utiliser un réducteur prend également un deuxième argument facultatif qui est l'état initial que

52
00:04:24,990 --> 00:04:30,860
vous souhaitez transmettre et qui peut être n'importe quoi, mais ici je vais passer un objet Javascript

53
00:04:30,860 --> 00:04:38,630
et l'état initial que je veux utiliser ici est finalement un objet qui a les valeurs d'entrée, qui est alors encore un

54
00:04:38,630 --> 00:04:39,990
autre objet imbriqué

55
00:04:40,220 --> 00:04:46,670
que je vais bientôt remplir, les validités d'entrée qui est également un objet imbriqué et peut-être une validité

56
00:04:46,670 --> 00:04:49,610
de forme globale, je vais le nommer forme

57
00:04:49,620 --> 00:04:55,700
est valide, ce qui est initialement faux disons. Donc, c'est maintenant mon état initial que je passe ici et

58
00:04:55,700 --> 00:05:03,260
c'est l'état que je veux changer plus tard depuis l'intérieur du réducteur de forme. Maintenant, sur les valeurs d'entrée, nous pouvons par exemple ajouter notre titre et c'est

59
00:05:03,260 --> 00:05:06,070
à vous de savoir comment vous le nommez, qui

60
00:05:06,070 --> 00:05:11,150
est une chaîne vide initialement disons, ce seront les valeurs initiales que je veux définir sur mes entrées ce

61
00:05:11,150 --> 00:05:15,980
sera dans le remplacer ma gestion d'état là-bas, où je stocke manuellement mes entrées dans différents états.

62
00:05:15,980 --> 00:05:20,220
Maintenant, je vais fusionner tout cela en un seul objet géré via ce réducteur.

63
00:05:20,480 --> 00:05:25,610
J'ai donc mon titre ici et en fait ce n'est pas toujours vide bien sûr, mais en fait il n'est vide

64
00:05:25,610 --> 00:05:27,410
que si nous n'avons pas de

65
00:05:27,410 --> 00:05:31,140
produit édité, donc je vais copier ce chèque à partir de là et l'utiliser ici.

66
00:05:31,370 --> 00:05:34,590
Maintenant, la même chose bien sûr pour l'imageUrl,

67
00:05:35,410 --> 00:05:40,150
là, je l'initialise avec éditéProduct. imageUrl si elle est disponible et sinon

68
00:05:40,150 --> 00:05:40,930
j'utilise une

69
00:05:40,930 --> 00:05:43,540
chaîne vide, essentiellement ce que j'ai fait là-bas aussi.

70
00:05:44,110 --> 00:05:48,030
Et bien sûr, je fais de même pour la description, ici je

71
00:05:48,070 --> 00:05:52,990
veux vérifier si le produit édité est défini et j'utilise cette description ou je le

72
00:05:53,080 --> 00:05:59,410
place sur une chaîne vide s'il n'est pas disponible. Dernier point mais non le moindre, nous avons le prix et là

73
00:05:59,410 --> 00:06:02,450
j'ai toujours une chaîne vide parce que nous n'en avons pas

74
00:06:02,470 --> 00:06:05,830
besoin dans le cas d'un produit édité, alors je m'en fiche de

75
00:06:05,860 --> 00:06:08,140
sa valeur ou nous en avons besoin,

76
00:06:08,140 --> 00:06:15,020
eh bien alors je veux l'initialiser avec une valeur vide de toute façon. Maintenant, bien sûr, chaque entrée a également une validité, nous pouvons donc ajouter un

77
00:06:15,020 --> 00:06:16,790
titre ici et vérifier si éditéProduit est

78
00:06:16,850 --> 00:06:19,010
défini, s'il est défini, alors je sais que je

79
00:06:19,040 --> 00:06:21,320
modifie, nous aurons donc prérempli le titre, donc initialement

80
00:06:21,320 --> 00:06:22,700
il être valide, donc

81
00:06:22,700 --> 00:06:24,950
dans ce cas ma valeur initiale serait vraie, sinon

82
00:06:24,950 --> 00:06:32,250
ce sera faux et maintenant c'est aussi quelque chose que nous pouvons répéter pour l'imageUrl. Si nous avons un produit édité, nous savons qu'il a été

83
00:06:32,250 --> 00:06:33,080
prérempli, il

84
00:06:33,080 --> 00:06:36,650
sera donc valide au départ, nous avons donc défini ce paramètre

85
00:06:36,650 --> 00:06:39,550
sur true, sinon je l'ai défini sur false.

86
00:06:39,740 --> 00:06:44,420
Pour ma description ici, c'est la même chose - vrai ou faux et pour le prix,

87
00:06:44,540 --> 00:06:46,760
c'est un peu égal, bien sûr

88
00:06:46,760 --> 00:06:49,090
nous ne pré-remplissons pas le prix si nous

89
00:06:49,100 --> 00:06:55,200
éditons mais si nous éditons je ne me soucie pas du prix de toute façon car il ne sera pas modifiable.

90
00:06:55,310 --> 00:07:00,890
Par conséquent, je sais que si je modifie, je devrais considérer cela comme valide car il ne peut pas être modifié de toute

91
00:07:00,890 --> 00:07:02,420
façon et donc je ne me

92
00:07:02,440 --> 00:07:09,680
soucie pas de cette entrée, mais je ne veux pas bloquer la soumission du formulaire en raison de la valeur false lorsque nous ne peut pas le modifier de toute façon.

93
00:07:09,980 --> 00:07:13,110
Je vais donc le définir sur true si cela n'est pas prévu pour être modifié, si

94
00:07:13,190 --> 00:07:18,770
nous ne modifions pas un produit mais que nous en ajoutons un, le prix sera modifiable et donc nous commencerons dans un faux état car l'entrée de prix

95
00:07:18,770 --> 00:07:24,230
sera être vide au départ, c'est ce que nous mettons en place ici. Et maintenant, la validité globale du formulaire, eh bien

96
00:07:24,320 --> 00:07:26,150
là encore je peux vérifier

97
00:07:26,150 --> 00:07:31,130
si nous avons un produit édité, ce qui signifie que nous éditons, puis le formulaire est

98
00:07:31,130 --> 00:07:33,590
vrai, le formulaire est initialement valide, sinon c'est

99
00:07:33,590 --> 00:07:39,240
faux initialement si nous ajoutons un nouveau produit . Maintenant, c'est mon état initial ici, maintenant

100
00:07:39,260 --> 00:07:45,050
cette fonction de réduction devrait être capable de changer cet état lorsque des actions sont envoyées

101
00:07:45,050 --> 00:07:48,660
et une action devrait être envoyée quoi que nous

102
00:07:48,730 --> 00:07:58,190
tapions dans l'une de nos entrées de texte, ce sera le déclencheur. Par conséquent, nous pouvons maintenant nous débarrasser de toutes ces affectations d'état ici et, par

103
00:07:58,220 --> 00:08:05,780
conséquent, nous pouvons également nous débarrasser de l'importation de l'état d'utilisation entier, même et nous assurer que nous envoyons l'action de mise à jour

104
00:08:05,790 --> 00:08:09,610
du réducteur pour chaque frappe que nous faisons dans une entrée.

105
00:08:09,710 --> 00:08:18,670
Donc, ici, dans le gestionnaire de changement de titre, je supprimerai finalement ce code, je laisserai le si vérifier pour l'instant mais je n'aurai pas de code

106
00:08:18,740 --> 00:08:22,770
pour le moment, mais là-bas, je veux envoyer la mise à jour

107
00:08:22,790 --> 00:08:28,960
du réducteur et maintenant cela se fait avec le résultat de l'appel use reducer car use reducer bien

108
00:08:28,960 --> 00:08:35,000
sûr renvoie quelque chose, tout comme l'état use. Il retourne également un tableau avec exactement deux éléments

109
00:08:35,000 --> 00:08:40,710
et nous pouvons donc le détruire avec cette syntaxe de destruction de tableau que nous avons également

110
00:08:40,730 --> 00:08:47,450
utilisée lors de l'utilisation et là, j'obtiens mon état de formulaire comme première valeur et une fonction de répartition comme

111
00:08:47,450 --> 00:08:48,250
deuxième valeur.

112
00:08:48,290 --> 00:08:55,280
C'est toujours ce que use reducer vous renverra, un instantané d'état qui se met à jour à chaque fois que vous le changez,

113
00:08:55,280 --> 00:08:55,770
donc

114
00:08:55,790 --> 00:09:01,490
chaque fois que vous le changez, ce composant se rendra et vous donnera un nouvel instantané d'état et une

115
00:09:01,550 --> 00:09:07,160
fonction, la répartition à la fin est une fonction qui vous permet d'envoyer des actions contre ce réducteur.

116
00:09:07,250 --> 00:09:11,760
Bien sûr, vous pouvez nommer ces deux éléments comme vous le souhaitez, mais

117
00:09:11,780 --> 00:09:13,270
je pense que c'est

118
00:09:13,280 --> 00:09:20,100
une dénomination raisonnable, c'est notre instantané d'état, c'est une fonction. Maintenant, au fait, l'expédition est un nom que j'ai déjà utilisé ici de Redux,

119
00:09:20,100 --> 00:09:24,460
donc ici je vais nommer cet état de formulaire d'expédition pour éviter un conflit de noms, vous pouvez

120
00:09:24,480 --> 00:09:25,980
le nommer comme vous le souhaitez.

121
00:09:26,760 --> 00:09:33,350
Donc, l'état du formulaire d'expédition peut maintenant être utilisé ici dans mon gestionnaire de changement de titre, je l'appelle juste et je

122
00:09:33,410 --> 00:09:39,170
dois y passer un objet qui décrit mon action et cet objet aura une propriété type, vous n'avez

123
00:09:39,170 --> 00:09:40,820
pas besoin d'avoir une propriété

124
00:09:40,820 --> 00:09:46,130
type , vous pouvez nommer cet ID ou cet identifiant ou tout ce que vous voulez, mais

125
00:09:46,130 --> 00:09:52,010
j'utilise type ici car je vérifie la propriété type à l'intérieur de ma fonction de réduction et cette fonction

126
00:09:52,010 --> 00:09:59,260
de réduction sera exécutée pour chaque nouvelle action que vous enverrez. Donc, si je retourne là-bas, le type sera la mise à jour

127
00:09:59,500 --> 00:10:07,650
du réducteur ou peut-être un meilleur nom serait en fait la mise à jour du formulaire, je pense, donc c'est aussi ce que j'utiliserai ici bien sûr

128
00:10:07,650 --> 00:10:10,830
et ici, donc la mise à jour du formulaire, peut-être l'entrée

129
00:10:10,830 --> 00:10:18,750
du formulaire mise à jour, le nom dépend bien sûr de vous, mais il doit être clair sur ce qu'il fait, alors ici, je vais également

130
00:10:18,750 --> 00:10:19,790
avoir une

131
00:10:19,800 --> 00:10:22,110
mise à jour de saisie de formulaire,

132
00:10:22,180 --> 00:10:23,280
oui, cela semble bon.

133
00:10:23,280 --> 00:10:24,510
Donc, la mise à

134
00:10:24,510 --> 00:10:26,120
jour des entrées de formulaire, c'est ce

135
00:10:26,130 --> 00:10:27,600
que j'ai envoyé là-bas, nous devons

136
00:10:27,600 --> 00:10:33,100
également le changer ici et bien sûr, vous pouvez également transmettre toutes les autres données que vous souhaitez utiliser à l'intérieur de

137
00:10:33,210 --> 00:10:38,250
votre réducteur et j'ai d'autres données que je veux utilisation. Ce serait la valeur et je vais juste nommer cette

138
00:10:38,250 --> 00:10:39,270
valeur ici, cette propriété,

139
00:10:39,300 --> 00:10:40,730
vous pouvez la nommer comme

140
00:10:40,740 --> 00:10:42,390
vous voulez, c'est le texte qui

141
00:10:42,420 --> 00:10:48,490
a été entré, donc je le transmets au réducteur pour que nous puissions le stocker dans notre état là et la validité de

142
00:10:48,490 --> 00:10:49,400
cette entrée.

143
00:10:49,470 --> 00:11:02,110
Donc, par conséquent, ici, j'ajouterai un accessoire valide, ce qui est initialement faux, et maintenant je supprimerai ce cas et vérifierai si nous sommes supérieurs à zéro ici, ce qui signifierait

144
00:11:02,110 --> 00:11:07,480
qu'il devrait être vrai car alors je définis est valide égal à vrai,

145
00:11:07,480 --> 00:11:12,850
sinon il restera faux et avec cela, nous pouvons également ajouter est valide

146
00:11:12,850 --> 00:11:19,050
comme clé de l'action et transmettre la valeur stockée à l'intérieur de notre variable est

147
00:11:19,060 --> 00:11:20,230
valide et

148
00:11:20,350 --> 00:11:26,320
ce sera faux initialement mais si notre longueur d'entrée pour le titre est supérieur à

149
00:11:26,320 --> 00:11:35,230
zéro, alors ce sera effectivement vrai et maintenant nous devons bien sûr également informer notre réducteur de l'entrée qui a déclenché cela.

150
00:11:35,330 --> 00:11:43,730
Je vais donc ajouter un champ ID d'entrée ici ou simplement saisir ce que vous voulez et utiliser le titre ici et cette clé ici devrait

151
00:11:43,730 --> 00:11:49,670
être une clé que vous avez également à l'intérieur de votre état, comme ici dans les valeurs d'entrée

152
00:11:49,790 --> 00:11:54,800
et les validités d'entrée, car cela permettra vous pour écrire du code réducteur que nous

153
00:11:54,890 --> 00:12:01,920
ferons bientôt qui est hautement réutilisable et très flexible car maintenant nous pouvons passer à l'étape suivante et nous assurer que

154
00:12:01,920 --> 00:12:09,210
nous transformons cela en une fonction qui fonctionne réellement pour toutes les entrées et qui est vraiment flexible en ce qui concerne comment

155
00:12:09,210 --> 00:12:10,080
nous l'utilisons.