Produkto puslapis Redux

Šioje pamokoje sukursime atskirą puslapį konkretaus produkto informacijai pateikti.

Atidarykime mūsų produktų aplikaciją ir aplanke products sukurkime failą ProductPage.jsx. Kaip jūs prisimenate, kiekvienas mūsų produktas turi unikalų id. Dėl šio id mes galėsime sugeneruoti unikalų kiekvieno produkto puslapio URL. Tradiciškai jis atrodys taip: /products/id123. Ir id bus talpinama jo dinaminėje dalyje (pačiu maršrutu mes užsiimsime šiek tiek vėliau).

Taigi, ProductPage.jsx sukurkime tuščią komponentą ProductPage:

export const ProductPage = () => {}

Pirmiausia, ką mes čia padarysime - panaudosime huką useParams, kad ištrauktume dinaminę URL dalį produkto puslapiui, kuriame mes esame:

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

Toliau pagal gautą id mes ieškosime reikiamo produkto products slaisyje (splice) store, naudodami mums jau pažįstamą huką useSelector:

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

Nepamirškime importuoti abiejų hukų į failą:

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

Jei reikiamo mums produkto nebus (pavyzdžiui, vartotojas įvedė neteisingą adresą), tai mes išvesime informaciją apie tai ekrane. Šiame žingsnyje kodas komponentui ProductPage turėtų atrodyti taip:

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

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

	if (!product) {
		return <p>Tokio produkto nėra</p>
	}
}

Ir mums lieka tik išvesti gautus produkto duomenis išdėstyme:

return (
	<div>
		<h2>{product.name}</h2>
		<p>Aprašymas: {product.desc}</p>
		<p>Kaina: {product.price}</p>
		<p>Kiekis:{product.amount}</p>
	</div>
)

Atidarykite savo aplikaciją su studentais. Aplanke students sukurkite failą StudentPage.jsx, kuriame jūs gausite ir pateiksite informaciją apie pasirinktą studentą.

Naudodamiesi react-redux huku useSelector gaukite reikiamą informaciją apie studentą, kaip parodyta pamokoje.

Komponente pateikite gautą informaciją apie studentą ekrane.