Verkoperspagina in Redux

Het laatste stukje werk. Laten we in deze les het laatste ding doen - voeg een aparte pagina voor elke verkoper toe aan onze applicatie. Hier zullen alleen reeds bekende acties staan. Laten we beginnen.

Open onze applicatie met producten, en daarin de map sellers. Laten we in deze map het bestand SellerPage.jsx aanmaken. Nu gaan we de code SellerPage voor onze component schrijven:

export const SellerPage = () => {}

Laten we eerst de id van de verkoper ophalen en daarmee het object van de benodigde verkoper vinden in de slice:

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

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

Vervolgens, verder in de code voor SellerPage, na het ophalen van de verkoper, halen we alle producten op, en daarna selecteren we daaruit alleen die producten die zijn geplaatst door deze verkoper:

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

En vervolgens maken we van de namen van de geselecteerde producten een lijst met behulp van map. Bovendien zal elke productnaam in deze lijst een link zijn naar de pagina van dat product:

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

En aan het einde van de code voor SellerPage returnen we de markup: een kop met de naam van de verkoper en een lijst van producten die deze verkoper heeft geplaatst:

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

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

Natuurlijk hebben we ook een route nodig voor de pagina van de verkoper. Laten we het bestand App.jsx openen en deze als laatste toevoegen aan de child routes:

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

Vergeet niet de benodigde hooks en componenten te importeren in SellersPage.jsx en App.jsx.

Laten we onze applicatie starten, de producten laden, en dan in het menu links klikken op de link 'Sellers'. Nu kunnen we naar de pagina van elke verkoper gaan door te klikken op zijn naam, en vervolgens op zijn pagina al zijn producten zien. En, door op een willekeurig van zijn producten te klikken, gaan we naar de pagina van dat product.

Dat is het voor nu. We hebben de basis van Redux bestudeerd voor het maken van een applicatie en zelfs een beetje verder. We hebben kennisgemaakt met verschillende nuttige instrumenten. Ik wens je veel succes met het maken van je Redux-applicaties!

Open je applicatie met studenten. Na bestudering van de lesmaterialen, maak in de map teachers het bestand TeacherPage.jsx aan. In de code van de component TeacherPage, haal het object met de benodigde leraar op en alle studenten van deze docent. Maak met behulp van map een lijst van hen, laat de volledige naam van elke student een link zijn naar de pagina van die student.

Zorg dat in de geretourneerde markup er een kop is met de volledige naam van de docent, daaronder een kleinere kop - met het vak, dat hij geeft, en nog lager de lijst van zijn studenten.

Sluit in App.jsx nog een child route aan voor de pagina van de docent.

Start je applicatie en zorg ervoor dat alles werkt.