Arbejde med data i Redux

I den forrige afsnit implementerede vi den grundlæggende arbejdsmodel for Redux, og nu kender du de vigtigste principper for en Redux-applikation. I de næste lektioner vil vi begynde at tilføje funktionalitet til vores applikation med produkter og arbejde med data.

Da applikationen vil vokse med nye komponenter og ruter, lad os gøre en ting med routing. Åbn applikationen med produkter, derefter filen root.jsx. Importer komponenten Outlet til den, og slet samtidig linjerne med import af ProductsList og NewProductForm:

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

Nu vil komponenten Root blive vist ved stien '/', og alle andre komponenter ved understier i Outlet. For at gøre dette skal vi rette lidt i layoutet af div'en #main-page for komponenten Root:

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

Her vil vi placere Outlet i stedet for komponenterne NewProductForm og ProductsList:

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

Formen til tilføjelse af produkter vil vi nu vise i ProductsList. Lad os åbne filen med denne komponent og tilføje import af formen:

import { NewProductForm } from './NewProductForm'

Og nu tilføjer vi komponenten med formen lige før produktlisten. Nu vil vores layout se sådan ud:

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

Lad os tilføje styling til klassen products-list i index.css:

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

Det eneste, der er tilbage for os, er at foretage ændringer i hovedkomponenten App. Lad os åbne App.jsx og importere komponenten ProductsList til den:

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

Derefter tilføjer vi egenskaben children for vores eneste, indtil videre, rodsti:

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

Og vi skriver den første understi som værdi for denne egenskab. Som sti indstiller vi den til 'products'. Nu vil vores produktliste ProductsList blive vist på denne adresse:

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

Lad os starte vores applikation og sikre os, at vi ikke har ødelagt noget. Ved roden '/' ser vi kun overskriften. Og formularen og produktlisten er gemt på adressen '/products'.

Åbn din applikation med studerende. I filen root.jsx skal du erstatte komponenterne StudentsList og NewStudentForm med Outlet.

Lad formularen til tilføjelse af en studerende nu vises i din StudentsList.

Foretag ændringer i din hovedkomponent App. Tilføj en understi til rodstien med stien '/students', hvor din StudentsList vil blive vist. Start applikationen og sikr dig, at alt virker.