Adatkezelés a Redux-ban

Az előző részben megvalósítottuk a Redux alapvető működési sémáját, és most már ismered a Redux alkalmazás fő elveit. A következő leckéken elkezdjük kiegészíteni termék alkalmazásunk funkcionalitását és dolgozni fogunk az adatokkal.

Mivel az alkalmazás új komponensekkel és útvonalakkal bővül, csináljunk meg egy dolgot az útválasztással. Nyisd meg a termék alkalmazást, majd a root.jsx fájlt. Importáld bele a Outlet komponenst, miközben töröld a ProductsList és a NewProductForm importáló sorait:

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

Mostantól a Root komponensünk a gyökérútvonalon '/' jelenik meg, minden más komponens pedig a Outlet gyermekeinek útvonalán. Ehhez kicsit módosítjuk a Root komponens #main-page div elrendezését:

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

Itt a NewProductForm és ProductsList komponensek helyére a Outlet-ot tesszük:

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

A termékek hozzáadására szolgáló űrlapot mostantól a ProductsList-ben fogjuk megjeleníteni. Nyissuk meg a komponens fájlját és adjuk hozzá az űrlap importját:

import { NewProductForm } from './NewProductForm'

És most adjuk hozzá az űrlap komponenst közvetlenül a terméklista elé. Mostantól a mi elrendezésünk így fog kinézni:

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

Egészítsük ki a products-list osztály stílusát a index.css fájlban:

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

Már csak a változtatásokat kell bevinnünk a fő App komponensbe. Nyissuk meg a App.jsx fájlt és importáljuk bele a ProductsList komponenst:

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

Ezután az egyetlen, gyökér útvonalunkhoz adjuk hozzá a children tulajdonságot:

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

És írjuk be ennek a tulajdonságnak az értékeként az első gyermek útvonalat. Útvonalként állítsuk be neki a 'products'-ot. Mostantól ezen a címen jelenik meg a terméklistánk ProductsList:

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

Indítsuk el az alkalmazásunkat és győződjünk meg arról, hogy nem törtünk el semmit. A gyökérben '/' csak a címet látjuk. Az űrlap és a terméklista elrejtett a '/products' cím mögött.

Nyisd meg a diák alkalmazásodat. A root.jsx fájlban cseréld le a StudentsList és a NewStudentForm komponenseket a Outlet-ra.

Legyen mostantól úgy, hogy a diák hozzáadására szolgáló űrlap a StudentsList-ben jelenik meg.

Vidd be a változtatásokat a fő komponensedbe App. Add hozzá a gyökér útvonalhoz egy gyermek útvonalat, a '/students' útvonallal, ahol a StudentsList komponens fog megjelenni. Indítsd el az alkalmazást és győződj meg arról, hogy minden működik.