Side for produkt i Redux

I denne lektion vil vi lave en separat side til visning af information om et specifikt produkt.

Lad os åbne vores applikation med produkter og i mappen products oprette filen ProductPage.jsx. Som du husker, har hvert af vores produkter et unikt id. Takket være dette id kan vi generere en unik URL for hvert produkts side. Traditionelt vil den se ud som: /products/id123. Og id vil være indeholdt i dens dynamiske del (selve ruten vil vi tage os af lidt senere).

Så lad os i ProductPage.jsx oprette en tom komponent ProductPage:

export const ProductPage = () => {}

Den første ting vi gør her - er at bruge hooket useParams for at trække den dynamiske del af URL'en ud for produktsiden, som vi befinder os på:

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

Dernæst vil vi ved hjælp af det modtagne id lede efter det ønskede produkt i slicen products i store, ved at bruge det allerede kendte hook useSelector:

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

Lad os ikke glemme at importere begge hooks i filen:

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

Hvis det produkt, vi leder efter, ikke findes (for eksempel, hvis brugeren har indtastet en forkert adresse), så vil vi vise information om dette på skærmen. På dette trin skal koden for komponenten ProductPage se sådan ud:

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

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

	if (!product) {
		return <p>Intet sådant produkt</p>
	}
}

Og så er der kun tilbage at vise de modtagne produktdata i opsætningen:

return (
	<div>
		<h2>{product.name}</h2>
		<p>Beskrivelse: {product.desc}</p>
		<p>Pris: {product.price}</p>
		<p>Antal:{product.amount}</p>
	</div>
)

Åbn din applikation med studerende. I mappen students skal du oprette filen StudentPage.jsx, hvor du vil modtage og vise information om den valgte studerende.

Brug react-redux hooket useSelector for at modtage den nødvendige information om den studerende, som vist i lektionen.

Vis den modtagne information om den studerende på skærmen i komponenten.