Formes et états locaux dans Redux

Dans les leçons précédentes, nous avons appris à récupérer les données du store et à les afficher dans un composant React. Dans cette leçon, nous commencerons à ajouter de nouvelles données. Nous le ferons à l'aide d'un formulaire qui, une fois rempli, permettra au vendeur d'ajouter un nouveau produit.

Commençons par le fait qu'il n'est pas toujours judicieux d'utiliser l'état global de Redux. Il y a des cas où nous pouvons créer des états locaux pour nos besoins. Nous appellerons états locaux les états qui sont utilisés à l'intérieur d'un composant spécifique pour des besoins techniques. Par exemple, pour cacher ou afficher quelque chose via un bouton.

Dans notre cas, l'utilisateur saisira des données dans un formulaire et, naturellement, des états nous seront utiles pour cela. Nous pourrions utiliser l'état global Redux, mais cela n'a pas de sens, puisque nos états ne fonctionneront qu'à un seul endroit de l'application pour le formulaire d'ajout de produit. La règle principale à suivre est que les états locaux ne doivent pas fonctionner en dehors du composant dans lequel ils sont créés, et ne doivent en aucun cas concerner le store. Une telle pratique est souvent utilisée lors de la création de formulaires.

Ouvrons le dossier products de notre application avec les produits, créons-y un fichier NewProductForm.jsx et importons-y le hook useState :

import { useState } from 'react'

Maintenant, créons le composant de formulaire lui-même et déclarons-y les états standards, comme nous le faisions auparavant dans React. Nous avons besoin d'états pour gérer le nom, la description, le prix et la quantité du produit :

export const NewProductForm = () => {
	const [name, setName] = useState('')
	const [desc, setDesc] = useState('')
	const [price, setPrice] = useState(0)
	const [amount, setAmount] = useState(0)
}

Ensuite, ajoutons le traitement standard pour chaque champ lors de la saisie des données par l'utilisateur :

const onNameChanged = (e) => setName(e.target.value)
const onDescChanged = (e) => setDesc(e.target.value)
const onPriceChanged = (e) => setPrice(e.target.value)
const onAmountChanged = (e) => setAmount(e.target.value)

Puis retournons dans le composant le rendu avec un titre et un formulaire vide :

return (
	<div>
		<h2>Ajouter un nouveau produit</h2>
		<form>
		</form>
	</div>
)

Ouvrez votre application avec les étudiants. Créez un fichier NewStudentForm.jsx dans le dossier students. Déclarez dans le composant NewStudentForm des états locaux pour les champs dont vous avez besoin, écrivez pour chaque champ un gestionnaire, comme montré dans la leçon.

Retournez dans le composant NewStudentForm le rendu contenant un titre et un formulaire vide.