L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2025 !
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