Rad sa podacima u Redux-u

U prethodnoj sekciji smo implementirali osnovnu shemu rada Redux-a i sada znate glavne principe rada Redux aplikacije. U narednim lekcijama ćemo početi da dopunjavamo funkcionalnost naše aplikacije sa proizvodima i radićemo sa podacima.

Pošto će aplikacija dobijati nove komponente i rute, hajde da uradimo jednu stvar sa rutiranjem. Otvorite aplikaciju sa proizvodima, zatim fajl root.jsx. Importujte u njega komponentu Outlet, pri tome obrišite linije sa importom ProductsList i NewProductForm:

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

Sada će komponenta Root biti prikazana na korenskoj putanji '/', a sve druge komponente na podrutanama u Outlet. Za ovo ćemo malo ispraviti markup div-a #main-page za komponentu Root:

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

Ovde ćemo staviti Outlet umesto komponenti NewProductForm i ProductsList:

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

Formu za dodavanje proizvoda sada ćemo prikazivati u ProductsList. Hajde da otvorimo fajl sa ovom komponentom i dodamo import forme:

import { NewProductForm } from './NewProductForm'

A sada dodajmo komponentu sa formom tačno ispred liste proizvoda. Sada će naš markup izgledati ovako:

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

Dopisaćemo stil za klasu products-list u index.css:

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

Ostaje nam samo da unesemo izmene u glavnu komponentu App. Otvorimo App.jsx i importujmo u nju komponentu ProductsList:

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

Zatim za našu još uvek jedinu rutu, koja je korenska, dodajmo svojstvo children:

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

I propisaćemo kao vrednost ovog svojstva prvu podrutu. Kao putanju podešićemo mu 'products'. Sada će na ovoj adresi biti prikazana naša lista sa proizvodima ProductsList:

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

Pokrenimo našu aplikaciju i uverimo se da nismo ništa pokvarili. U korenu '/' vidimo samo naslov. A formica i lista proizvoda su nam sakrivene na adresi '/products'.

Otvorite vašu aplikaciju sa studentima. U fajlu root.jsx zamenite komponente StudentsList i NewStudentForm sa Outlet.

Neka se sada forma za dodavanje studenta prikazuje u vašoj komponenti StudentsList.

Unesite izmene u vašu glavnu komponentu App. Dodajte korenoj ruti podrutu, sa putanjom '/students', po kojoj će biti prikazana vaša StudentsList. Pokrenite aplikaciju i uverite se da vam sve radi.