Werken met gegevens in Redux

In het vorige hoofdstuk hebben we het basisschema van Redux geïmplementeerd en nu ken je de belangrijkste principes van een Redux-applicatie. In de komende lessen beginnen we de functionaliteit van onze applicatie met producten uit te breiden en gaan we werken met gegevens.

Aangezien de applicatie zal groeien met nieuwe componenten en routes, laten we één ding doen met routing. Open de applicatie met producten, dan het bestand root.jsx. Importeer daarin de component Outlet, verwijder daarbij de regels met import van ProductsList en NewProductForm:

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

Nu zal de component Root worden weergegeven op het rootpad '/', en alle andere componenten op onderliggende paden in Outlet. Laten we hiervoor de opmaak van de div #main-page voor de component Root een beetje aanpassen:

<div id="main-page">
	<h2>Mijn Producten App</h2>
	<hr></hr>
	<NewProductForm />
	<ProductsList />
</div>

Hier plaatsen we Outlet in plaats van de componenten NewProductForm en ProductsList:

<div id="main-page">
	<h2>Mijn Producten App</h2>
	<hr></hr>
	<Outlet />
</div>

We zullen het formulier voor het toevoegen van producten nu weergeven in ProductsList. Laten we het bestand met deze component openen en de import van het formulier toevoegen:

import { NewProductForm } from './NewProductForm'

En laten we nu de component met het formulier direct voor de productlijst toevoegen. Nu ziet onze opmaak er zo uit:

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

Laten we de stijl voor de klasse products-list in index.css aanvullen:

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

Het enige wat we nog hoeven te doen is wijzigingen aan te brengen in de hoofdcomponent App. Laten we App.jsx openen en daarin de component ProductsList importeren:

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

Voeg vervolgens voor onze vooralsnog enige route, die de rootroute is, de eigenschap children toe:

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

En laten we als waarde van deze eigenschap de eerste childroute opschrijven. Als pad stellen we 'products' in. Nu zal op dit adres onze lijst met producten ProductsList worden weergegeven:

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

Laten we onze applicatie starten en ervoor zorgen dat we niets hebben kapotgemaakt. In de root '/' zien we alleen de titel. En het formulier en de productlijst zijn voor ons verborgen op het adres '/products'.

Open je applicatie met studenten. Vervang in het bestand root.jsx de componenten StudentsList en NewStudentForm door Outlet.

Laat het formulier voor het toevoegen van een student nu in jouw StudentsList worden weergegeven.

Breng wijzigingen aan in je hoofdcomponent App. Voeg aan de rootroute een childroute toe, met het pad '/students', waarop jouw StudentsList wordt weergegeven. Start de applicatie en zorg ervoor dat alles werkt.