Formulaire d'édition de données dans Redux

Nous avons maintenant un réducteur pour modifier les données dans le store. Dans cette leçon, nous créerons un formulaire avec lequel nous pourrons éditer les données d'un produit.

Ouvrons notre application de produits et créons dans le dossier products le fichier EditProductForm.jsx. La création du composant EditProductForm sera analogue à NewProductForm, à l'exception de quelques différences sur lesquelles nous nous attarderons. Par conséquent, copiez entièrement le code de NewProductForm.jsx et collez-le dans le fichier créé EditProductForm.jsx. Maintenant, commençons dans l'ordre.

Retirez de l'importation nanoid, nous n'en avons pas besoin ici pour générer un id. Remplacez l'importation productAdded par productUpdated, car ici nous utiliserons l'action pour la mise à jour, et non pour l'ajout d'un produit.

Ensuite, changeons le nom de notre fonction de composant de NewProductForm en EditProductForm.

Avant de définir les états locaux dans la fonction EditProductForm pour name, desc, price et amount, insérons encore quelques lignes de code. Comme nous l'avons déjà mentionné plus tôt, ici nous n'avons pas besoin de générer un id. Maintenant notre tâche est de l'obtenir à partir des données du produit à modifier. Nous avons déjà fait cela lors de la création d'une page dédiée pour un produit. Donc, récupérons l'id à l'aide du hook useParams, puis trouvons le produit dont nous avons besoin, en utilisant le hook useSelector (n'oubliez pas d'importer les deux hooks au début du fichier) :

let params = useParams()
const { productId } = params

const product = useSelector((state) =>
	state.products.find((product) => product.id === productId)
)

Après cela, modifions le bloc de déclaration des états locaux. Maintenant nous devons leur assigner comme valeur initiale les données du produit obtenues depuis le store. Voici à quoi ressemblera le premier état, retravaillez les trois restants vous-même :

const [name, setName] = useState(product.name)

Après l'affectation de la variable pour useDispatch ajoutons encore une ligne de code cette fois pour le hook useNavigate. Nous allons l'utiliser pour retourner à la page du produit lorsque l'utilisateur enregistrera les modifications apportées dans le formulaire :

const navigate = useNavigate()

Importez également ce hook au début du fichier :

import { useNavigate, useParams } from 'react-router-dom'

Ensuite, nous avons les gestionnaires pour les champs de saisie. Et après eux, nous devons corriger la fonction onSaveProductClick. Maintenant, lors d'un clic, nous enverrons l'action productUpdated avec l'id obtenu et les données modifiées sous forme d'objet. Ensuite, nous ajouterons notre navigate, pour naviguer vers la page du produit modifié :

const onSaveProductClick = () => {
	if (name && desc && price && amount) {
		dispatch(
			productUpdated({
				id: productId,
				name,
				desc,
				price,
				amount,
			})
		);
		
		navigate(`/products/${productId}`);
	}
}

Il ne reste plus que dans notre retour JSX à trouver la ligne :

<h2>Add a New Product</h2>

Et la remplacer par :

<h2>Edit Product</h2>

Ouvrez votre application d'étudiants. Créez le fichier EditStudentForm.jsx par analogie avec NewStudentForm.jsx. Apportez-y les modifications, comme montré dans la leçon.