web-dev-qa-db-fra.com

Devrais-je utiliser le magasin redux-form au lieu de l'état du composant et du magasin personnalisé Redux?

Je crois que dans toute application, il devrait y avoir une source de vérité.

Mon application va avoir

  • Plus de 90 formulaires de transaction et 150 rapports
  • Structures de données complexes (niveau parent, niveau enfant, calculs)

Donc, dans React, j'ai trouvé trois endroits confus pour stocker l'état:

  1. Etat du composant - à utiliser lorsque nous ne} voulons partager des données
  2. Magasin personnalisé Redux (géré par développeur) - à utiliser lorsque nous souhaitons partager des données
  3. Magasin Redux-Form (géré par Redux-Form) - Utilisation pour la validation

J'ai commencé à utiliser le formulaire redux juste pour validation , puis j'ai obtenu confused lorsqu'il m'a permis d'accéder au magasin redux-form pour les données, car j'accédais déjà aux données de l'état de composant ET également de mon magasin personnalisé dans redux

  1. Le formulaire Redux n'enregistre pas les champs cachés. Pour enregistrer des champs cachés, vous devez créer un champ avec un attribut désactivé, etc.

  2. Si vous effectuez des calculs tels que , AMOUNT = QTY * RATE; Ici, l'utilisateur entrera QTY et RATE et AMOUNT sera calculé. Ici, il va immédiatement refléter l'état du composant, mais pas celui de la forme redux. Pour le faire refléter sous forme de redux, nous devons tirer.

    this.props.dispatch(change('Invoice', 'amount', 55))

  3. Il ne sera pas toujours possible d'éviter l'état des composants, si j'écris, le code de la formule de calcul ressemblera à ceci

    Seulement l'état de forme Redux

    const amount = someReduxFormApiGet(QTY) + someReduxFormApiGet(RATE) this.props.dispatch(change('Invoice', 'amount', 55))

    Seulement réagir état

    onChange(){ will have set QTY & RATE in component state} const amount = this.state.QTY * this.state.RATE

    Conclusion: Si je vais avec redux-form, je devrai écrire du code supplémentaire pour rendre redux-store stable en synchronisation, alors que, dans l'état du composant React, j'aurai la fonction handleChange() qui dessinera l'état dans this.state. Je pense aussi que je vais avoir beaucoup de flexibilité dans l'état des composants

  4. Si mon modèle de données devient plus complexe, il sera très difficile à gérer dans le magasin redux-form. Alors là, je pense à ne pas utiliser redux Magasin personnalisé OR Etat du composant

  5. D'autres bibliothèques qui valident les entrées React n'utilisent pas Redux pour implémenter la validation. C'est juste redux-form qui utilise redux pour gérer la validation.

J'ai donc conclu que

  • Redux-form est né juste pour validation et pas pour gérer un modèle de données complexe.

  • Les modèles de données complexes doivent être gérés en conséquence dans l'état du composant OR du magasin personnalisé redux

  • D'après la documentation de Redux-form, il gère très bien la validation, mais aux fins de la modélisation des données, il suggère des solutions qui ne sont pas tout à fait simples.

Besoin d'aide pour décider

Devrais-je utiliser le magasin redux-form pour la modélisation de données

OR

juste utiliser pour la validation

ET

utiliser l'état du composant et le magasin redux personnalisé pour modéliser les données?

reactjsreact-nativereduxredux-form
14
vijay

Si vous n'avez pas besoin d'exécuter des tâches asynchrones, c'est-à-dire des validations de formulaire async, il est facile de créer un composant générateur de formulaire personnalisé au lieu d'utiliser redux-form qui est beaucoup plus complexe, ajoute une couche supplémentaire de passe-partout et vous oblige à utiliser redux . Pour réf. check it . https://github.com/bietkul/react-native-form-builder

0
Kuldeep Saxena

Après près de sept mois frustrants

J'ai créé une nouvelle bibliothèque, React-chopper .

Une reliure bidirectionnelle révolutionnaire dans React qui répondra à toute complexité d'objet métier, presque comme AngularJS.

Prendre plaisir! Code comme AngularJS dans React.

0
vijay

Je recommanderais d'utiliser Redux-Form uniquement pour la collecte et la validation des données. Utilisez votre propre état de composant et/ou votre magasin redux personnalisé, le cas échéant. 

Vous avez raison d'utiliser uniquement redux pour un état à partager. Gardez les choses simples et réutilisables.

Bonne lecture:

https://goshakkk.name/should-i-put-form-state-into-redux/

https://hackernoon.com/using-forms-in-react-redux-tips-and-tricks-48ad9c7522f6

https://medium.com/dailyjs/why-build-your-forms-with-redux-form-bcacbedc9e8

0
ovation22