Notre approche ici fonctionne bien sûr. Nous stockons les entrées dans un certain état,
nous stockons la validité dans un certain état et nous pourrions faire cette gestion de validité pour toutes nos entrées ici et simplement
avoir nos différentes fonctions de gestionnaire de changement ici pour nos différentes entrées, cela fonctionnerait.
Une remarque importante en passant avant de passer à autre chose, puisque je vérifie la validité du titre ici
dans le gestionnaire de soumission, bien sûr, nous devons également l'ajouter
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
tableau de dépendances,
c'est important, sinon cette fonction ne sera pas reconstruite lorsque cette validité changera,
ce qui signifie que nous ne pourrons plus la soumettre par la suite. Le problème avec notre approche actuelle est que
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é
différents, du moins potentiellement si nous commençons à gérer notre validité, comme ceci et
pour de très grandes formes, bien sûr, cela signifie beaucoup de copier-coller, beaucoup de gestion de l'État.
Maintenant, si vous avez autant d'états qui sont en quelque sorte connectés, vous pouvez également le faire de manière plus
élégante, au lieu d'avoir vos états séparés pour
chaque entrée, vous pouvez avoir un grand état qui fusionne toutes les valeurs d'entrée et qui fusionne toutes
les validités puis utilisez un concept appelé réducteur, pas un réducteur Redux mais un supporté par React out pour gérer
cet état.
Vous faites cela avec le crochet d'utilisation du réducteur qui n'a encore rien à voir avec Redux, le
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
sorties et donc React prend également en charge ce et vous verrez comment vous pouvez l'utiliser dans
cette conférence maintenant.
Alors, quelle est l'idée d'un réducteur? Maintenant, il est important de comprendre
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
états connectés ou un état plus complexe et que vous ne voulez pas avoir un tas d'appels d'état
d'utilisation individuelle et un tas d'états individuels que vous gérez. Vous pouvez ensuite utiliser use reducer et voici comment
cela fonctionne.
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
le crée en dehors de mon composant de formulaire, vous pouvez le faire
là-dedans mais si vous ne dépendez pas des accessoires, vous peut le faire en dehors de là pour que
cela ne se reconstruise pas à chaque cycle de re-rendu et que vous n'ayez même pas à utiliser use callback qui
bien sûr coûte aussi des performances si vous l'utilisez. Donc utilisez-le en dehors de là,
construisez-le en dehors de là pour éviter les recréations inutiles de cette fonction et maintenant le réducteur, tout
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é
par Redux, le réducteur fonctionne toujours comme ça. Maintenant là-dedans, encore une fois comme dans
un réducteur Redux, car encore une fois, ils fonctionnent comme ça, vous pouvez vérifier différents
types d'actions et ici je veux vérifier un type, cela aussi bien utiliser
une instruction if,
vous pouvez utiliser une instruction switch case aussi
et que je vérifie l'action. taper ici dépend entièrement de
moi, vous pouvez nommer ce que vous voulez parce que vous serez celui qui enverra l'action
plus tard et ici je vérifie l'action de mise à jour qui est également un identifiant que j'ai choisi et
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,
votre identifiant de mise à jour du réducteur comme celui-ci et l'utiliser à la place ici si vous le souhaitez et
vous pouvez le nommer comme vous le souhaitez.
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
devons comprendre comment nous utilisons le réducteur de forme.
Donc, laissons-le comme ça pour le moment et descendons vers le composant lui-même, là,
nous commençons à configurer notre état de forme ici, donc
ici, je veux appeler l'utilisateur réducteur et maintenant utiliser réducteur prendre une telle fonction de réducteur, donc je passerai
mon réducteur de forme que j'ai installé ici et qui est encore inachevé.
Utiliser un réducteur prend également un deuxième argument facultatif qui est l'état initial que
vous souhaitez transmettre et qui peut être n'importe quoi, mais ici je vais passer un objet Javascript
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
autre objet imbriqué
que je vais bientôt remplir, les validités d'entrée qui est également un objet imbriqué et peut-être une validité
de forme globale, je vais le nommer forme
est valide, ce qui est initialement faux disons. Donc, c'est maintenant mon état initial que je passe ici et
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
à vous de savoir comment vous le nommez, qui
est une chaîne vide initialement disons, ce seront les valeurs initiales que je veux définir sur mes entrées ce
sera dans le remplacer ma gestion d'état là-bas, où je stocke manuellement mes entrées dans différents états.
Maintenant, je vais fusionner tout cela en un seul objet géré via ce réducteur.
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
que si nous n'avons pas de
produit édité, donc je vais copier ce chèque à partir de là et l'utiliser ici.
Maintenant, la même chose bien sûr pour l'imageUrl,
là, je l'initialise avec éditéProduct. imageUrl si elle est disponible et sinon
j'utilise une
chaîne vide, essentiellement ce que j'ai fait là-bas aussi.
Et bien sûr, je fais de même pour la description, ici je
veux vérifier si le produit édité est défini et j'utilise cette description ou je le
place sur une chaîne vide s'il n'est pas disponible. Dernier point mais non le moindre, nous avons le prix et là
j'ai toujours une chaîne vide parce que nous n'en avons pas
besoin dans le cas d'un produit édité, alors je m'en fiche de
sa valeur ou nous en avons besoin,
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
titre ici et vérifier si éditéProduit est
défini, s'il est défini, alors je sais que je
modifie, nous aurons donc prérempli le titre, donc initialement
il être valide, donc
dans ce cas ma valeur initiale serait vraie, sinon
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é
prérempli, il
sera donc valide au départ, nous avons donc défini ce paramètre
sur true, sinon je l'ai défini sur false.
Pour ma description ici, c'est la même chose - vrai ou faux et pour le prix,
c'est un peu égal, bien sûr
nous ne pré-remplissons pas le prix si nous
éditons mais si nous éditons je ne me soucie pas du prix de toute façon car il ne sera pas modifiable.
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
façon et donc je ne me
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.
Je vais donc le définir sur true si cela n'est pas prévu pour être modifié, si
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
sera être vide au départ, c'est ce que nous mettons en place ici. Et maintenant, la validité globale du formulaire, eh bien
là encore je peux vérifier
si nous avons un produit édité, ce qui signifie que nous éditons, puis le formulaire est
vrai, le formulaire est initialement valide, sinon c'est
faux initialement si nous ajoutons un nouveau produit . Maintenant, c'est mon état initial ici, maintenant
cette fonction de réduction devrait être capable de changer cet état lorsque des actions sont envoyées
et une action devrait être envoyée quoi que nous
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
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
du réducteur pour chaque frappe que nous faisons dans une entrée.
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
pour le moment, mais là-bas, je veux envoyer la mise à jour
du réducteur et maintenant cela se fait avec le résultat de l'appel use reducer car use reducer bien
sûr renvoie quelque chose, tout comme l'état use. Il retourne également un tableau avec exactement deux éléments
et nous pouvons donc le détruire avec cette syntaxe de destruction de tableau que nous avons également
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
deuxième valeur.
C'est toujours ce que use reducer vous renverra, un instantané d'état qui se met à jour à chaque fois que vous le changez,
donc
chaque fois que vous le changez, ce composant se rendra et vous donnera un nouvel instantané d'état et une
fonction, la répartition à la fin est une fonction qui vous permet d'envoyer des actions contre ce réducteur.
Bien sûr, vous pouvez nommer ces deux éléments comme vous le souhaitez, mais
je pense que c'est
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,
donc ici je vais nommer cet état de formulaire d'expédition pour éviter un conflit de noms, vous pouvez
le nommer comme vous le souhaitez.
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
dois y passer un objet qui décrit mon action et cet objet aura une propriété type, vous n'avez
pas besoin d'avoir une propriété
type , vous pouvez nommer cet ID ou cet identifiant ou tout ce que vous voulez, mais
j'utilise type ici car je vérifie la propriété type à l'intérieur de ma fonction de réduction et cette fonction
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
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
et ici, donc la mise à jour du formulaire, peut-être l'entrée
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
avoir une
mise à jour de saisie de formulaire,
oui, cela semble bon.
Donc, la mise à
jour des entrées de formulaire, c'est ce
que j'ai envoyé là-bas, nous devons
é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
votre réducteur et j'ai d'autres données que je veux utilisation. Ce serait la valeur et je vais juste nommer cette
valeur ici, cette propriété,
vous pouvez la nommer comme
vous voulez, c'est le texte qui
a été entré, donc je le transmets au réducteur pour que nous puissions le stocker dans notre état là et la validité de
cette entrée.
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
qu'il devrait être vrai car alors je définis est valide égal à vrai,
sinon il restera faux et avec cela, nous pouvons également ajouter est valide
comme clé de l'action et transmettre la valeur stockée à l'intérieur de notre variable est
valide et
ce sera faux initialement mais si notre longueur d'entrée pour le titre est supérieur à
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.
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
être une clé que vous avez également à l'intérieur de votre état, comme ici dans les valeurs d'entrée
et les validités d'entrée, car cela permettra vous pour écrire du code réducteur que nous
ferons bientôt qui est hautement réutilisable et très flexible car maintenant nous pouvons passer à l'étape suivante et nous assurer que
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
nous l'utilisons.