Hantera data i Redux

I föregående avsnitt implementerade vi ett grundläggande Redux-flöde och nu känner du till de huvudsakliga principerna för ett Redux-program. I de kommande lektionerna kommer vi att börja utöka funktionaliteten i vår produktapplikation och arbeta med data.

Eftersom applikationen kommer att växa med nya komponenter och rutter, låt oss göra en sak med routningen. Öppna produktapplikationen, sedan filen root.jsx. Importera komponenten Outlet till den, och ta samtidigt bort raderna med importen av ProductsList och NewProductForm:

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

Nu kommer komponenten Root att visas vid root-sökvägen '/', och alla andra komponenter vid underordnade sökvägar i Outlet. För att göra detta, låt oss justera lite HTML-strukturen för div #main-page för komponenten Root:

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

Här placerar vi Outlet istället för komponenterna NewProductForm och ProductsList:

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

Formuläret för att lägga till produkter kommer vi nu att visa i ProductsList. Låt oss öppna filen med denna komponent och lägga till importen av formuläret:

import { NewProductForm } from './NewProductForm'

Och nu lägger vi till komponenten med formuläret precis före produktlistan. Nu kommer vår HTML-struktur att se ut så här:

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

Låt oss lägga till en stil för klassen products-list i index.css:

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

Allt som återstår för oss är att göra ändringar i huvudkomponenten App. Låt oss öppna App.jsx och importera komponenten ProductsList till den:

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

Sedan, för vår hittills enda rutt, som är root-routen, låt oss lägga till egenskapen children:

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

Och specificera den första underordnade rutten som värde för denna egenskap. Som sökväg sätter vi 'products'. Nu kommer vår produktlista ProductsList att visas på denna adress:

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

Låt oss starta vår applikation och se till att vi inte har förstört något. I rooten '/' ser vi bara rubriken. Medan formuläret och produktlistan har gömts på adressen '/products'.

Öppna din studentapplikation. I filen root.jsx, ersätt komponenterna StudentsList och NewStudentForm med Outlet.

Låt formuläret för att lägga till en student nu visas i din StudentsList.

Gör ändringar i din huvudkomponent App. Lägg till en underordnad rutt till root-rutten, med sökvägen '/students', där din StudentsList kommer att visas. Starta applikationen och se till att allt fungerar för dig.