Értékesítő oldala a Redux-ban

Már csak a vége fele járunk. Ezen az órán tegyük meg az utolsó dolgot - adjuk hozzá alkalmazásunkhoz egy külön oldalt minden egyes értékesítő számára. Itt csak már ismert műveletek lesznek. Vágjunk bele.

Nyissuk meg a termékeinkkel rendelkező alkalmazásunkat, és benne a sellers mappát. Hozzunk létre ebben a mappában egy SellerPage.jsx fájlt. Most kezdjük el írni a SellerPage komponensünk kódját:

export const SellerPage = () => {}

Először szerezzük meg az értékesítő azonosítóját, és ezzel keressük meg a megfelelő értékesítő objektumot a slice-ban:

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

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

Ezután a SellerPage kódjában, az értékesítő lekérése után, lekérjük az összes terméket, majd kiválasztjuk közülük csak azokat, amelyeket ez az értékesítő hozott létre:

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

Majd a kiválasztott termékek neveiből képezzünk listát a map segítségével. Sőt, minden egyes terméknév ebben a listában link lesz az adott termék oldalára:

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

Végül a SellerPage kódjának végén adjuk vissza a JSX-t: egy címet az értékesítő nevével és egy listát azokról a termékekről, amelyeket ez az értékesítő hozott létre:

return (
	<div>
	<h2>Értékesítő: {seller.name}</h2>

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

Természetesen szükségünk van egy útvonalra az értékesítő oldalához. Nyissuk meg a App.jsx fájlt és adjuk hozzá utolsóként a gyermek útvonalakhoz:

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

Ne felejtsd el importálni a szükséges hook-okat és komponenseket a SellersPage.jsx és a App.jsx fájlokba.

Indítsuk el az alkalmazásunkat, töltsük be a termékeket, majd a bal oldali menüben kattintsunk a 'Eladók' linkre. Most már beléphetünk bármelyik értékesítő oldalára a nevére kattintva, majd az oldalán megtekinthetjük az összes termékét. És bármelyik termékre kattintva, beléphetünk az adott termék oldalára.

Egyelőre ennyi. Megtanultuk a Redux alapjait alkalmazások létrehozásához, sőt egy kicsit mélyebben is. Megismerkedtünk különböző hasznos eszközökkel. Sok sikert kívánok a ti Redux-alkalmazásaitok létrehozásához!

Nyisd meg a diákokkal rendelkező alkalmazásodat. A lecke anyagainak tanulmányozása után, a teachers mappában hozz létre egy TeacherPage.jsx fájlt. A TeacherPage komponens kódjában szerezd meg a kívánt tanár objektumát és az adott oktató összes diákját. A map segítségével készíts belőlük listát, legyen minden diák teljes neve link a diák oldalára.

A visszaadott JSX-ben legyen egy cím a tanár teljes nevével, alatta egy kisebb cím - az általa oktatott tárggyal, még alatta pedig a diákjainak listája.

A App.jsx fájlban kapcsolj be még egy gyermek útvonalat a tanár oldalához.

Indítsd el az alkalmazásodat és győződj meg róla, hogy minden működik.