Databehandling i Redux

I forrige avsnitt implementerte vi et grunnleggende oppsett for hvordan Redux fungerer, og nå kjenner du de viktigste prinsippene for et Redux-applikasjon. I de neste leksjonene skal vi begynne å utvide funksjonaliteten i vår produkthåndteringsapplikasjon og jobbe med data.

Siden applikasjonen vil vokse med nye komponenter og ruter, la oss gjøre en endring med routing. Åpne produkthåndteringsapplikasjonen, og deretter filen root.jsx. Importer komponenten Outlet, og slett linjene som importerer ProductsList og NewProductForm:

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

Nå vil komponenten Root vises ved sti-roten '/', mens alle andre komponenter vil vises i barnerutene i Outlet. For å gjøre dette, justerer vi litt på oppsettet av div-en #main-page for komponenten Root:

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

Her plasserer vi Outlet i stedet for komponentene NewProductForm og ProductsList:

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

Skjemaet for å legge til produkter vil vi nå vise i ProductsList. La oss åpne filen med denne komponenten og legge til import av skjemaet:

import { NewProductForm } from './NewProductForm'

Og nå legger vi til komponenten med skjemaet rett før produktlisten. Nå vil oppsettet vårt se slik ut:

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

La oss skrive stilen for klassen products-list i index.css:

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

Det som gjenstår for oss er å gjøre endringer i hovedkomponenten App. La oss åpne App.jsx og importere komponenten ProductsList:

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

Deretter, for vår eneste rute så langt, som er rot-ruten, legger vi til egenskapen children:

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

Og vi definerer verdien for denne egenskapen som den første bareruten. Som sti setter vi den til 'products'. Nå vil vår produktliste ProductsList vises på denne adressen:

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

La oss starte applikasjonen vår og forsikre oss om at vi ikke har ødelagt noe. I roten '/' ser vi kun overskriften. Mens skjemaet og produktlisten er gjemt på adressen '/products'.

Åpne studentapplikasjonen din. I filen root.jsx, bytt ut komponentene StudentsList og NewStudentForm med Outlet.

La skjemaet for å legge til en student vises i StudentsList.

Gjør endringer i hovedkomponenten din App. Legg til en barerute til rot-ruten, med stien '/students', der din StudentsList vil vises. Start applikasjonen og forsikre deg om at alt fungerer.