Sida för produkt i Redux

I den här lektionen ska vi skapa en separat sida för att visa information om en specifik produkt.

Öppna vår produktapplikation och i mappen products skapar vi filen ProductPage.jsx. Som du minns har varje produkt ett unikt id. Tack vare detta id kan vi generera en unik URL för varje produkts sida. Traditionellt ser den ut som: /products/id123. Och id kommer att finnas i dess dynamiska del (vi återkommer till själva routingen lite senare).

Så, låt oss i ProductPage.jsx skapa en tom komponent ProductPage:

export const ProductPage = () => {}

Det första vi gör här är att använda hooken useParams för att hämta den dynamiska delen av URL:en för produktsidan vi befinner oss på:

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

Sedan söker vi efter rätt produkt med det erhållna id:t i products-slice:n i store, med hjälp av den redan bekanta hooken useSelector:

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

Glöm inte att importera båda hookarna i filen:

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

Om den önskade produkten inte finns (till exempel om användaren har angett en felaktig adress), så visar vi information om detta på skärmen. I detta skede bör koden för komponenten ProductPage se ut så här:

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

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

	if (!product) {
		return <p>Ingen sådan produkt</p>
	}
}

Och återstår bara att visa den erhållna produktinformationen i renderingen:

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

Öppna din studentapplikation. I mappen students skapar du filen StudentPage.jsx, där du ska hämta och visa information om vald student.

Med hjälp av react-redux hooken useSelector ska du hämta nödvändig information om studenten, som visas i lektionen.

Visa den erhållna informationen om studenten i komponenten på skärmen.