Page d'édition de produit dans le navigateur avec Redux
Lors de la dernière leçon, nous avons créé un formulaire pour éditer un produit. Ajoutons-lui une route.
Ouvrons notre application de produits,
et dans celle-ci le fichier App.jsx et ajoutons un autre
objet de route enfant dans
le tableau pour la propriété children (n'oubliez
pas d'importer EditProductForm) :
{
path: '/editProduct/:productId',
element: <EditProductForm />,
},
De plus, pour naviguer vers le formulaire d'édition
nous devons créer un lien. Ouvrons pour cela
ProductPage.jsx et plaçons ce lien dans
le JSX retourné après le dernier paragraphe
avec la quantité du produit et avant la div fermante :
<Link to={`/editProduct/${product.id}`} className="link-btn">
edit
</Link>
Importons également Link depuis la bibliothèque de routeur :
import { Link } from 'react-router-dom'
Lançons notre application et cliquons sur le bouton
de visualisation d'un produit quelconque. Essayons
de l'éditer et retournons à la liste
des produits en cliquant sur le lien
'Products' dans le menu de gauche. Vous pouvez également voir dans Redux
DevTools la nouvelle action
productUpdated et observer les modifications
de l'objet produit dans le store.
Ouvrez votre application d'étudiants.
Dans le fichier App.jsx, ajoutez une autre route enfant
pour l'édition des données d'un étudiant.
Ajoutez un élément Link dans le JSX
de la page de l'étudiant pour naviguer vers
la page d'édition de ses données.
Lancez votre application, essayez d'éditer les données d'un étudiant. Portez attention à la barre d'adresse du navigateur lorsque vous êtes sur la page d'édition. Observez les changements dans Redux DevTools du navigateur.
