Tootelehe lehekülg Reduxis

Sellel tunnil loome eraldi lehekülje konkreetse toote teabe kuvamiseks.

Avame oma tooterakenduse ja kaustas products loome faili ProductPage.jsx. Nagu te mäletate, on igal meie tootel unikaalne id. Tänu sellele id-le saame luua iga toote jaoks unikaalse URL-i. Traditsiooniliselt näeb see välja järgmine: /products/id123. Ja id sisaldub selle dünaamilises osas (marsruudiga hakkame tegelema veidi hiljem).

Nii et loome failis ProductPage.jsx tühja komponendi ProductPage:

export const ProductPage = () => {}

Esimene asi, mida me siin teeme - kasutame hook'i useParams, et välja tõmmata tootelehe URL-i dünaamiline osa, kus me asume:

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

Seejärel otsime saadud id põhjal vajaliku toote slices products store'is, kasutades meile juba tuttavat hook'i useSelector:

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

Ärgem unustagem importida mõlemad hook-id faili:

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

Kui aga vajalikku toodet ei leita (näiteks sisestas kasutaja vale aadressi), siis kuvame selle kohta teate ekraanil. Sellel sammul peaks komponendi ProductPage kood välja nägema järgmine:

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

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

	if (!product) {
		return <p>Sellist toodet ei ole</p>
	}
}

Ja meil jääb üle vaid kuvada saadud toode andmed veebilehe kujunduses:

return (
	<div>
		<h2>{product.name}</h2>
		<p>Kirjeldus: {product.desc}</p>
		<p>Hind: {product.price}</p>
		<p>Kogus:{product.amount}</p>
	</div>
)

Avage oma õpilasterakendus. Kaustas students looge fail StudentPage.jsx, kus te saate ja kuvate valitud õpilase kohta teavet.

Kasutades react-redux hook'i useSelector hankige vajalik teave õpilase kohta, nagu näidatud tunnis.

Kuvage komponendis saadud teave õpilase kohta ekraanil.