J’utilise Redux. Dois-je gérer l’état des entrées contrôlées dans le magasin Redux ou utiliser setState au niveau des composants?

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é?

  1. 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 .

  2. 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:

  1. React Forms – Il fournit un tas de composants d’aide pour simplifier le rendu et la validation des formulaires.

  2. Réagir au schéma JSON – Permet de créer un formulaire HTML à partir d’un schéma JSON.

  3. 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:

  1. Réagir à la forme finale

Et un autre concurrent important dans l’espace qui vaut le détour est:

  1. Formik

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):

Etat local

  • Utile lorsque mon formulaire n’a aucun rapport avec les autres composants de l’interface utilisateur. Il suffit de capturer les données des input et des soumissions. Je l’utilise la plupart du temps pour des formulaires simples.
  • Je ne vois pas beaucoup de cas d’utilisation dans le débogage temporel du stream d’entrée de mon formulaire (sauf si un autre composant d’interface utilisateur en dépend).

État redux

  • Utile lorsque le formulaire doit mettre à jour un autre composant d’interface utilisateur dans mon application (un peu comme une liaison bidirectionnelle ).
  • Je l’utilise lorsque les 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