Site icon Blog ARC Optimizer

Gestion de l’état du formulaire dans React à l’aide du formulaire Redux


Qu’est-ce que le formulaire Redux ?

Redux Form est un HOC (Higher Order Component) qui utilise react-redux pour que les formulaires HTML en réaction puissent stocker tout son état dans redux.

Avantage d’utiliser Redux Form ?

  • Redux Form est très facile à utiliser et à mettre en œuvre, il nous suffit d’envelopper notre composant de formulaire avec le HOC fourni par Redux Form et nous sommes prêts à partir.
  • L’application de la validation au formulaire est très simple dans Redux Form, nous pouvons appliquer la validation à tous les champs ainsi que des validations pour des champs individuels.

Étapes pour implémenter Redux Form dans votre application

  • Créer un projet React


  • Installer le paquet

  • Création d’un magasin Redux

  • Créer un formulaire à l’aide du formulaire redux


    Importation Domaine et reduxForm du package redux-form.


    Création d’un formulaire à l’aide de Domaine importé de redux-form.
    champ de texte utilisé pour créer des composants personnalisés dans Field.
  • Connectez le formulaire à Redux-Form


    Cette étape liera l’état des valeurs du formulaire au redux.
  • Ajouter des validations au formulaire

    Créer un valider.js dossier


    Ajoutez la fonction de validation à la reduxForm()
  • Résultat de la configuration ci-dessus

    Lorsque le formulaire est chargé dans le DOM, il devient une clé ‘Connexion’ dans le redux sous dans le formulaire réducteur


    Une fois que nous avons entré des valeurs dans les champs, elles seront automatiquement reflétées dans le redux

Ci-dessus sont les étapes pour faire une normale reduxFormmais il y a plus à reduxForm, pour plonger profondément dans reduxForm, consultez son site officiel https://redux-form.com/7.0.1/




Source link
Quitter la version mobile