Termékoldal a Redux-ban

Ezen a leckén készítünk egy külön oldalt egy adott termék információinak megjelenítésére.

Nyissuk meg a termékalkalmazásunkat, és a products mappában hozzunk létre egy ProductPage.jsx fájlt. Ahogy emlékszel, minden termékünknek egyedi azonosítója van. Ennek az id-nak köszönhetően tudunk egyedi URL-t generálni minden termékhez. Hagyományosan így fog kinézni: /products/id123. És az id a dinamikus részében fog szerepelni (magával az útvonallal kicsit később foglalkozunk).

Tehát, hozzuk létre a ProductPage.jsx fájlban egy üres ProductPage komponenst:

export const ProductPage = () => {}

Az első dolog, amit itt teszünk - használjuk a useParams hookot, hogy kinyerjük a dinamikus részt a termékoldal URL-jéből, ahol éppen vagyunk:

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

Ezután a kapott id alapján megkeressük a szükséges terméket a products slice-ban a store-ban, a már jól ismert useSelector hook segítségével:

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

Ne felejtsük el importálni mindkét hookot a fájlba:

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

Ha pedig a szükséges termék nem található (például a felhasználó hibás címet adott meg), akkor erről információt jelenítünk meg a képernyőn. Ezen a ponton a ProductPage komponens kódjának így kell kinéznie:

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

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

	if (!product) {
		return <p>Nincs ilyen termék</p>
	}
}

És már csak a kapott termékadatok megjelenítése van hátra a markup-ban:

return (
	<div>
		<h2>{product.name}</h2>
		<p>Leírás: {product.desc}</p>
		<p>Ár: {product.price}</p>
		<p>Mennyiség: {product.amount}</p>
	</div>
)

Nyissa meg a diákalkalmazását. A students mappában hozzon létre egy fájlt StudentPage.jsx, ahol egy kiválasztott diák adatait fogja megjeleníteni.

A react-redux useSelector hook segítségével szerezze be a szükséges információt a diákról, ahogyan az a leckében is látható.

A komponensben jelenítse meg a képernyőn a kapott információt a diákról.