Stránka predajcu v Reduxe

Už nám zostáva len málo. Na tejto lekcii urobíme poslednú vec - pridáme do našej aplikácie samostatnú stránku pre každého predajcu. Pôjde len o vám už známe akcie. Poďme na to.

Otvorme našu aplikáciu s produktmi a v nej priečinok sellers. V tomto priečinku vytvoríme súbor SellerPage.jsx. Teraz začneme písať kód SellerPage pre náš komponent:

export const SellerPage = () => {}

Na začiatok získame id predajcu a podľa neho nájdeme objekt potrebného predajcu v slice:

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

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

Ďalej nižšie v kóde pre SellerPage po získaní predajcu získame všetky produkty a potom vyberieme z nich len tie, ktoré sú vystavené týmto predajcom:

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

A potom z názvov vybraných produktov vytvoríme zoznam pomocou map. Pričom každý názov produktu v tomto zozname bude odkazom na stránku tohto produktu:

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

A na konci kódu pre SellerPage vrátime verziu: nadpis s menom predajcu a zoznam produktov, ktoré tento predajca vystavil:

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

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

Samozrejme, potrebujeme aj route pre stránku predajcu. Otvorme súbor App.jsx a pridajme ho ako posledný medzi podriadené routes:

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

Nezabudnite importovať potrebné hooks a komponenty do SellersPage.jsx a App.jsx.

Spustíme našu aplikáciu, načítame produkty, a potom v menu vľavo klikneme na odkaz 'Sellers'. Teraz môžeme ísť na stránku ľubovoľného predajcu kliknutím na jeho názov a potom na jeho stránke uvidíme všetky jeho produkty. A kliknutím na ľubovoľný z jeho produktov, prejdeme na stránku s týmto produktom.

To je zatiaľ všetko. Naučili sme sa základy Reduxu pre tvorbu aplikácie a dokonca aj trochu hĺbšie. Zoznámili sme sa s rôznymi užitočnými nástrojmi. Prajem vám veľa šťastia pri tvorbe vašich Redux aplikácií!

Otvorte vašu aplikáciu so študentmi. Po preštudovaní materiálov lekcie, v priečinku teachers vytvorte súbor TeacherPage.jsx. V kóde komponentu TeacherPage získajte objekt s potrebným učiteľom a všetkých študentov daného učiteľa. Pomocou map z nich vytvorte zoznam, nech meno každého študenta bude odkazom na stránku tohto študenta.

Nech vo vrátenej verzii budete mať nadpis s menom učiteľa, nižšie bude menší nadpis - s predmetom, ktorý učí, a ešte nižšie zoznam jeho študentov.

V App.jsx pripojte ešte jeden podriadený route pre stránku s učiteľom.

Spustite vašu aplikáciu a presvedčte sa, že všetko funguje.