Travailler avec les données dans Redux

Dans la section précédente, nous avons mis en œuvre le schéma de base de Redux et maintenant vous connaissez les principes fondamentaux du fonctionnement d'une application Redux. Dans les prochaines leçons, nous commencerons à ajouter des fonctionnalités à notre application de produits et nous travaillerons avec les données.

Étant donné que l'application va s'enrichir de nouveaux composants et routes, faisons une chose avec le routage. Ouvrez l'application avec les produits, puis le fichier root.jsx. Importez-y le composant Outlet, tout en supprimant les lignes d'importation de ProductsList et NewProductForm :

import { Outlet } from 'react-router-dom'

Maintenant, le composant Root s'affichera sur le chemin racine '/', et tous les autres composants sur les chemins enfants dans Outlet. Pour cela, corrigeons un peu le balisage de la div #main-page pour le composant Root :

<div id="main-page">
	<h2>My Products App</h2>
	<hr></hr>
	<NewProductForm />
	<ProductsList />
</div>

Ici, nous placerons Outlet à la place des composants NewProductForm et ProductsList :

<div id="main-page">
	<h2>My Products App</h2>
	<hr></hr>
	<Outlet />
</div>

Nous afficherons désormais le formulaire d'ajout de produits dans ProductsList. Ouvrons le fichier de ce composant et ajoutons l'import du formulaire :

import { NewProductForm } from './NewProductForm'

Et maintenant, ajoutons le composant du formulaire juste avant la liste des produits. Désormais, notre balisage ressemblera à ceci :

return (
	<div>
		<NewProductForm />
		<div>
			<h2>Products</h2>
			{dispProducts}
		</div>
	</div>
)

Ajoutons le style pour la classe products-list dans index.css :

.products-list {
	display: flex;
	flex-direction: column;
}

Il ne nous reste plus qu'à apporter des modifications dans le composant principal App. Ouvrons App.jsx et importons-y le composant ProductsList :

import { ProductsList } from './parts/products/ProductsList'

Ensuite, pour notre seule route actuelle, qui est la racine, ajoutons la propriété children :

const router = createBrowserRouter([
	{ path: '/', element: <Root />, children: [] },
])

Et spécifions comme valeur de cette propriété la première route enfant. Définissons son chemin sur 'products'. Désormais, à cette adresse, notre liste de produits ProductsList s'affichera :

children: [
	{
		path: '/products',
		element: <ProductsList />,
	},
],

Lançons notre application et assurons-nous que nous n'avons rien cassé. À la racine '/', nous voyons seulement le titre. Le formulaire et la liste des produits sont cachés à l'adresse '/products'.

Ouvrez votre application avec les étudiants. Dans le fichier root.jsx, remplacez les composants StudentsList et NewStudentForm par Outlet.

Laissez maintenant le formulaire d'ajout d'étudiant s'afficher dans votre StudentsList.

Apportez les modifications dans votre composant principal App. Ajoutez à la route racine une route enfant, avec le chemin '/students', sur laquelle votre StudentsList s'affichera. Lancez l'application et assurez-vous que tout fonctionne chez vous.