Side for produkt i Redux

I denne leksjonen skal vi lage en egen side for å vise informasjon om et spesifikt produkt.

La oss åpne applikasjonen vår med produkter og i mappen products opprette filen ProductPage.jsx. Som du husker, har hvert produkt vårt en unik id. Takket være denne id-en vil vi kunne generere en unik URL for hvert produkt. Tradisjonelt vil den se slik ut: /products/id123. Og id-en vil være inneholdt i dens dynamiske del (selve ruten vil vi ta oss av litt senere).

Så, la oss i ProductPage.jsx opprette en tom komponent ProductPage:

export const ProductPage = () => {}

Det første vi gjør her er å bruke hooken useParams for å hente ut den dynamiske delen av URL-en for produktsiden vi befinner oss på:

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

Deretter vil vi søke etter det nødvendige produktet i slice products i store, ved å bruke den allerede kjente hooken useSelector:

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

La oss ikke glemme å importere begge hookene i filen:

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

Hvis det ønskede produktet ikke finnes (for eksempel hvis brukeren skrev inn en ugyldig adresse), vil vi vise informasjon om dette på skjermen. På dette stadiet skal koden for komponenten ProductPage se slik ut:

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

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

	if (!product) {
		return <p>Ingent slikt produkt</p>
	}
}

Og da gjenstår det bare å vise den innhentede produktdataen i oppsettet:

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

Åpne applikasjonen din med studenter. I mappen students opprett filen StudentPage.jsx, der du vil hente og vise informasjon om den valgte studenten.

Ved hjelp av react-redux hooken useSelector skal du hente nødvendig informasjon om studenten, som vist i leksjonen.

Vis den innhentede informasjonen om studenten på skjermen i komponenten.