Prodajalčeva stran v Redux

Ostalo je le še malo. V tej lekciji naredimo zadnjo stvar - dodajmo v našo aplikacijo ločeno stran za vsakega prodajalca. Tukaj bodo le že vam znane akcije. Pa začnimo.

Odprimo našo aplikacijo s produkti, v njej pa mapo sellers. V tej mapi ustvarimo datoteko SellerPage.jsx. Zdaj pa začnimo pisati kodo SellerPage za naš komponent:

export const SellerPage = () => {}

Za začetek pridobimo id prodajalca in po njem poiščimo objekt želenega prodajalca v slice:

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

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

Nato spodaj v kodi za SellerPage po pridobitvi prodajalca pridobimo vse produkte, nato pa izberimo le tiste, ki jih je objavil tale prodajalec:

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

Nato iz imen izbranih produktov oblikujmo seznam s pomočjo map. Pravzaprav bo vsako ime produkta v tem seznamu povezava na stran tega produkta:

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

In na koncu kode za SellerPage vrnimo verstavo: naslov z imenom prodajalca in seznam produktov, ki jih je objavil ta prodajalec:

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

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

Seveda potrebujemo tudi route za prodajalčevo stran. Odprimo datoteko App.jsx in ga dodajmo zadnjega med podrejene route:

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

Ne pozabite importrati potrebnih hooks in komponent v SellersPage.jsx in App.jsx.

Zaženimo našo aplikacijo, naložimo produkte, nato pa v meniju na levi kliknimo na povezavo 'Sellers'. Zdaj lahko gremo na stran katerega koli prodajalca, s klikom na njegovo ime, nato pa na njegovi strani vidimo vse njegove produkte. In, s klikom na katerega koli od njegovih produktov, gremo na stran s tem produktom.

Za zdaj je to vse. Preučili smo osnove Redux za ustvarjanje aplikacije in celo malo globje. Spoznali smo različne uporabne orodja. Želim vam veliko sreče pri ustvarjanju vaših Redux-aplikacij!

Odprite vašo aplikacijo s študenti. Po preučitvi gradiva lekcije, v mapi teachers ustvarite datoteko TeacherPage.jsx. V kodi komponenta TeacherPage pridobite objekt z želenim učiteljem in vse študente tega učitelja. S pomočjo map ustvarite iz njih seznam, naj bo polno ime vsakega študenta povezava na stran tega študenta.

Naj bo v vrnjeni verstavi naslov s polnim imenom učitelja, spodaj manjši naslov - s predmetom, ki ga poučuje, še spodaj pa seznam njegovih študentov.

V App.jsx priključite še en podrejen route za stran z učiteljem.

Zaženite vašo aplikacijo in se prepričajte, da vse deluje.