Prodavačeva stranica u Redux-u

Malo je ostalo. Hajde da na ovom času uradimo poslednju stvar - dodajmo u našu aplikaciju posebnu stranicu za svakog prodavca. Ovde će biti samo već vama poznate radnje. Krenimo.

Otvorimo našu aplikaciju sa proizvodima, a u njoj folder sellers. Napravićemo u ovom folderu fajl SellerPage.jsx. Sada počećemo da pišemo kod SellerPage za naš komponent:

export const SellerPage = () => {}

Za početak ćemo dobiti id prodavca i po njemu pronaći objekat traženog prodavca u slice-u:

export const SellerPage = () => {
	let params = useParams()
	const { sellerId } = params

	const seller = useSelector((state) => selectSellerById(state, sellerId))
}

Zatim niže u kodu za SellerPage posle dobijanja prodavca dobićemo sve proizvode, a zatim izabrati iz njih samo one, koje je postavio ovaj prodavac:

const productsOfSeller = useSelector((state) => {
	const allProducts = selectAllProducts(state)
	return allProducts.filter((product) => product.seller === sellerId)
})

A zatim ćemo od naziva izabranih proizvoda formirati listu pomoću map. Pored toga svaki naziv proizvoda u ovoj listi biće link na stranicu tog proizvoda:

const productNames = productsOfSeller.map((product) => (
	<li key={product.id}>
		<Link to={`/products/${product.id}`}>{product.name}</Link>
	</li>
))

I na kraju koda za SellerPage vraćamo verstku: naslov sa imenom prodavca i listu proizvoda, koje je postavio ovaj prodavac:

return (
	<div>
	<h2>Prodavac: {seller.name}</h2>

	<ul>{productNames}</ul>
	</div>
)

Naravno da nam je takođe potreban route za stranicu prodavca. Otvorimo fajl App.jsx i dodajmo ga poslednjim podređenim rutama:

{
	path: '/sellers/:sellerId',
	element: <SellerPage />,
},

Ne zaboravite da importujete potrebne hukove i komponente u SellersPage.jsx i App.jsx.

Pokrenimo našu aplikaciju, učitaćemo proizvode, a zatim u meniju levo kliknimo na link 'Prodavci'. Sada možemo otići na stranicu bilo kog prodavca, klikom na njegovo ime, a zatim na njegovoj stranici videti sve njegove proizvode. A, klikom na bilo koji od njegovih proizvoda, otići ćemo na stranicu sa tim proizvodom.

Za sada je to sve. Mi smo proučili osnove Redux-a za kreiranje aplikacije i čak malo dublje. Upoznavali smo se sa različitim korisnim alatima. Želim vam puno sreće u kreiranju vaših Redux aplikacija!

Otvorite vašu aplikaciju sa studentima. Nakon proučavanja materijala lekcije, u folderu teachers kreirajte fajl TeacherPage.jsx. U kodu komponenta TeacherPage dobiti objekat sa traženim nastavnikom i sve studente ovog nastavnika. Pomoću map kreirajte od njih listu, neka puno ime svakog studenta bude link na stranicu ovog studenta.

Neka u vraćenoj verstki imate naslov sa punim imenom nastavnika, ispod neka bude manji naslov - sa predmetom, koji on predaje, a još ispod lista njegovih studenata.

U App.jsx povežite još jednu podređenu rutu za stranicu sa nastavnikom.

Pokrenite vašu aplikaciju i uverite se, da sve radi.