Delo s podatki v Redux

V prejšnjem razdelku smo implementirali osnovno shemo delovanja Redux in zdaj poznate glavna načela delovanja Redux aplikacije. V naslednjih lekcijah bomo začeli dopolnjevati funkcionalnost naše aplikacije s produkti in delali s podatki.

Ker bo aplikacija obsegala nove komponente in poti, naredimo z usmerjevanjem eno stvar. Odprite aplikacijo s produkti, nato datoteko root.jsx. Uvozite vanjo komponento Outlet, pri tem izbrišite vrstice z uvozom ProductsList in NewProductForm:

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

Zdaj se bo komponenta Root prikazovala na korenski poti '/', vse druge komponente pa na podrejenih v Outlet. Za to nekoliko popravimo postavitev diva #main-page za komponento Root:

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

Tukaj bomo postavili Outlet namesto komponent NewProductForm in ProductsList:

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

Obrazec za dodajanje produktov bomo zdaj prikazovali v ProductsList. Odprimo datoteko s to komponento in dodajmo uvoz obrazca:

import { NewProductForm } from './NewProductForm'

In zdaj dodajmo komponento z obrazcem neposredno pred seznam produktov. Zdaj bo naša postavitev izgledala takole:

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

Dopišimo slog za razred products-list v index.css:

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

Preostane nam le še, da spremenimo glavno komponento App. Odprimo App.jsx in vanjo uvozimo komponento ProductsList:

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

Nato za našo trenutno edino pot, ki je korenska, dodajmo lastnost children:

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

In kot vrednost te lastnosti zapišimo prvo podrejeno pot. Kot pot nastavimo 'products'. Zdaj se bo na tem naslovu prikazal naš seznam s produkti ProductsList:

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

Zaženimo našo aplikacijo in se prepričajmo, da nismo ničesar pokvarili. V korenu '/' vidimo samo naslov. Obrazec in seznam produktov pa sta skrita na naslovu '/products'.

Odprite vašo aplikacijo s študenti. V datoteki root.jsx zamenjajte komponente StudentsList in NewStudentForm z Outlet.

Naj se obrazec za dodajanje študenta zdaj prikazuje v vašem StudentsList.

Vnesite spremembe v vašo glavno komponento App. Dodajte korenski poti podrejeno pot, s potjo '/students', na kateri se bo prikazal vaš StudentsList. Zaženite aplikacijo in se prepričajte, da vse deluje.