Práca s dátami v Reduxe

V predchádzajúcej časti sme implementovali základnú schému fungovania Reduxu a teraz poznáte hlavné princípy fungovania Redux aplikácie. V nasledujúcich lekciách začneme dopĺňať funkcionalitu našej aplikácie s produktmi a budeme pracovať s dátami.

Keďže aplikácia bude obrastať novými komponentmi a trasami, urobme s smerovaním jednu vec. Otvorte aplikáciu s produktmi, potom súbor root.jsx. Importujte do neho komponent Outlet, pričom odstráňte riadky s importom ProductsList a NewProductForm:

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

Teraz sa komponent Root bude zobrazovať v koreňovej ceste '/', a všetky ostatné komponenty v podradených v Outlet. Preto trochu opravíme verstku divu #main-page pre komponent Root:

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

Tu umiestnime Outlet namiesto komponentov NewProductForm a ProductsList:

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

Formulár na pridávanie produktov teraz budeme zobrazovať v ProductsList. Otvorme súbor s týmto komponentom a pridajme import formulára:

import { NewProductForm } from './NewProductForm'

A teraz pridajme komponent s formulárom priamo pred zoznam produktov. Teraz bude naša verstka vyzerať takto:

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

Dopíšme štýl pre triedu products-list v index.css:

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

Zostáva nám len vykonať zmeny v hlavnom komponente App. Otvorme App.jsx a importujme do neho komponent ProductsList:

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

Potom pre našu zatiaľ jedinú trasu, ktorá je koreňová, pridajme vlastnosť children:

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

A napíšme ako hodnotu tejto vlastnosti prvú podradenú trasu. Ako cestu nastavme jej 'products'. Teraz na tejto adrese sa bude zobrazovať náš zoznam s produktami ProductsList:

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

Spustíme našu aplikáciu a presvedčíme sa, že sme nič nepokazili. V koreni '/' vidíme len nadpis. A formulár a zoznam produktov sú nám schované na adrese '/products'.

Otvorte vašu aplikáciu so študentmi. V súbore root.jsx nahraďte komponenty StudentsList a NewStudentForm na Outlet.

Nech sa teraz formulár na pridanie študenta zobrazuje u vás v StudentsList.

Vykonajte zmeny vo vašom hlavnom komponente App. Pridajte ku koreňovej trase podradenú, s cestou '/students', po ktorej bude zobrazený váš StudentsList. Spustite aplikáciu a presvedčte sa, že vám všetko funguje.