Pagina voor product in Redux

In deze les maken we een aparte pagina voor het weergeven van informatie over een specifiek product.

Laten we onze applicatie met producten openen en in de map products het bestand ProductPage.jsx aanmaken. Zoals je je herinnert, heeft elk van onze producten een unieke id. Dankzij deze id kunnen we een unieke URL voor elke productpagina genereren. Traditioneel ziet het er als volgt uit: /products/id123. En de id zal zich bevinden in het dynamische deel (we zullen ons later bezighouden met de route zelf).

Laten we dus in ProductPage.jsx een leeg component ProductPage aanmaken:

export const ProductPage = () => {}

Het eerste wat we hier doen is gebruikmaken van de hook useParams om het dynamische deel van de URL voor de productpagina waar we zich bevinden, op te halen:

export const ProductPage = () => {
	let params = useParams()
	const { productId } = params
}

Vervolgens zoeken we aan de hand van de verkregen id naar het juiste product in de slice products in de store, met behulp van de ons bekende hook useSelector:

const product = useSelector((state) =>
	state.products.find((product) => product.id === productId)
)

Laten we niet vergeten beide hooks te importeren in het bestand:

import { useSelector } from 'react-redux'
import { useParams } from 'react-router-dom'

Als het product dat we zoeken niet wordt gevonden (bijvoorbeeld omdat de gebruiker een ongeldig adres heeft ingevoerd), dan tonen we hierover informatie op het scherm. Op dit punt zou de code voor het component ProductPage er als volgt uit moeten zien:

export const ProductPage = () => {
	let params = useParams()
	const { productId } = params

	const product = useSelector((state) =>
		state.products.find((product) => product.id === productId)
	)

	if (!product) {
		return <p>Geen such product</p>
	}
}

En het enige wat ons rest is om de verkregen productgegevens weer te geven in de opmaak:

return (
	<div>
		<h2>{product.name}</h2>
		<p>Beschrijving: {product.desc}</p>
		<p>Prijs: {product.price}</p>
		<p>Hoeveelheid:{product.amount}</p>
	</div>
)

Open je applicatie met studenten. Maak in de map students het bestand StudentPage.jsx aan, waarin je informatie over de geselecteerde student zult ophalen en weergeven.

Haal met behulp van de react-redux hook useSelector de nodige informatie over de student op, zoals getoond in de les.

Geef in het component de verkregen informatie over de student weer op het scherm.