Stránka prodejce v Redux

Zbývá už jen málo. Pojďme v této lekci udělat poslední věc - přidat do naší aplikace samostatnou stránku pro každého prodejce. Půjdou zde pouze již vám známé akce. Pusťme se do toho.

Otevřeme naši aplikaci s produkty, a v ní složku sellers. Vytvořme v této složce soubor SellerPage.jsx. Nyní začneme psát kód SellerPage pro náš komponent:

export const SellerPage = () => {}

Pro začátek získáme id prodejce a podle něj najdeme objekt potřebného prodejce ve slici:

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

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

Dále níže v kódu pro SellerPage po získání prodejce získáme všechny produkty, a poté vybereme z nich pouze ty, které jsou vystaveny daným prodejcem:

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

A dále z názvů vybraných produktů vytvoříme seznam pomocí map. Přičemž každý název produktu v tomto seznamu bude odkazem na stránku tohoto produktu:

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

A na konci kódu pro SellerPage vrátíme verst: nadpis s názvem prodejce a seznam produktů, které vystavil tento prodejce:

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

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

Samozřejmě ještě potřebujeme trasu pro stránku prodejce. Otevřeme soubor App.jsx a přidejme ji jako poslední k podřízeným trasám:

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

Nezapomeňte importovat potřebné haky a komponenty do SellersPage.jsx a App.jsx.

Spustíme naši aplikaci, načteme produkty, a poté v menu vlevo klikneme na odkaz 'Sellers'. Nyní můžeme přejít na stránku libovolného prodejce kliknutím na jeho název, a poté na jeho stránce uvidět všechny jeho produkty. A kliknutím na libovolný z jeho produktů přejdeme na stránku s tímto produktem.

To je prozatím vše. Prostudovali jsme základy Redux pro vytváření aplikací a dokonce i trochu hlouběji. Seznámili jsme se s různými užitečnými nástroji. Přeji vám hodně štěstí při vytváření vašich Redux aplikací!

Otevřete vaši aplikaci se studenty. Po prostudování materiálů lekce ve složce teachers vytvořte soubor TeacherPage.jsx. V kódu komponentu TeacherPage získejte objekt s potřebným učitelem a všechny studenty daného učitele. Pomocí map z nich vytvořte seznam, nechť celé jméno každého studenta bude odkazem na stránku tohoto studenta.

Nechť ve vrácené verzi bude nadpis s celým jménem učitele, níže bude menší nadpis - s předmětem, který učí, a ještě níže seznam jeho studentů.

V App.jsx připojte další podřízenou trasu pro stránku s učitelem.

Spusťte vaši aplikaci a ujistěte se, že vše funguje.