J’ai essayé de trouver le meilleur moyen de gérer mes formulaires de réaction. J’ai essayé d’utiliser le onChange pour déclencher une action et mettre à jour mon magasin Redux avec mes données de formulaire. J’ai également essayé de créer un état local et lorsque mon formulaire est soumis, je déclenche et actionne et met à jour le magasin redux.
Comment dois-je gérer mon état d’entrée contrôlé?
Vous pouvez utiliser le propre état du composant. Et puis prendre cet état et le donner comme argument à l’action. C’est à peu près la “manière de réagir” comme décrit dans les documents réactifs .
Vous pouvez également consulter le formulaire Redux . Il fait essentiellement ce que vous avez décrit et relie les entrées du formulaire avec l’état Redux.
Le premier moyen implique essentiellement que vous faites tout manuellement – contrôle maximum et passe-partout maximal. Le deuxième moyen signifie que vous laissez le composant d’ordre supérieur faire tout le travail pour vous. Et puis il y a tout entre les deux. J’ai vu plusieurs paquets simplifiant un aspect spécifique de la gestion des formulaires:
React Forms – Il fournit un tas de composants d’aide pour simplifier le rendu et la validation des formulaires.
Réagir au schéma JSON – Permet de créer un formulaire HTML à partir d’un schéma JSON.
Formsy React – Comme le dit la description: “Cette extension de React JS vise à être ce” bon point “entre flexibilité et réutilisabilité.”
Mise à jour: semble – t-il que le formulaire Redux soit remplacé par:
Et un autre concurrent important dans l’espace qui vaut le détour est:
J’aime cette réponse de l’un des co-auteurs de Redux: https://github.com/reactjs/redux/issues/1287
Utilisez React pour un état éphémère qui n’a pas d’importance pour l’application globalement et ne change pas de manière complexe. Par exemple, une bascule dans un élément d’interface utilisateur, un état d’entrée de formulaire. Utilisez Redux pour les états importants ou mutants de manière complexe. Par exemple, les utilisateurs en cache ou une brouillon.
Parfois, vous voudrez passer de l’état Redux à l’état React (lorsque vous stockez quelque chose dans Redux) ou inversement (lorsque davantage de composants doivent avoir access à un état autrefois local).
La règle de base est la suivante: faites ce qui est moins gênant.
Autrement dit, si vous êtes sûr que votre formulaire n’affecte pas l’état global ou doit être conservé après que votre composant soit démonté, conservez l’état de réaction.
TL; DR
Il est bon d’utiliser tout ce qui semble adapté à votre application (Source: docs Redux )
Quelques règles de base pour déterminer quel type de données doit être placé dans Redux:
- Est-ce que d’autres parties de l’application se soucient de ces données?
- Avez-vous besoin de créer d’autres données dérivées basées sur ces données d’origine?
- Les mêmes données sont-elles utilisées pour piloter plusieurs composants?
- Avez-vous intérêt à pouvoir rétablir cet état à un moment donné (par exemple, le débogage par déplacement dans le temps)?
- Voulez-vous mettre en cache les données (c.-à-d. Utiliser ce qui est en état si c’est déjà là au lieu de le demander à nouveau)?
Ces questions peuvent facilement vous aider à identifier l’approche qui conviendrait le mieux à votre application. Voici mes vues et approches que j’utilise dans mes applications (pour les formulaires):
input
et des soumissions. Je l’utilise la plupart du temps pour des formulaires simples. input
mon formulaire entraînent le render
autres composants en fonction de ce que l’utilisateur saisit. Personnellement, je recommande fortement de tout garder dans l’état Redux et de quitter l’état des composants locaux. C’est essentiellement parce que si vous commencez à regarder l’interface utilisateur en fonction de l’état, vous pouvez effectuer des tests sans navigateur et vous pouvez garder une référence à l’historique de l’état complet (comme dans leurs entrées, les boîtes de dialog ouvertes, etc. , quand un bogue a frappé – pas quel était leur état depuis le début des temps) pour l’utilisateur à des fins de débogage. Tweet connexe du royaume de clojure
édité pour append: c’est là que nous et notre société sœur évoluons en termes d’applications de production et de gestion du redux / state / ui