Produkta lapa Redux

Šajā nodarbībā mēs izveidosim atsevišķu lapu, lai parādītu informāciju par konkrētu produktu.

Atveram mūsu lietotni ar produktiem un mapē products izveidosim failu ProductPage.jsx. Kā jūs atceraties, katram mūsu produktam ir unikāls id. Pateicoties šim id, mēs varēsim ģenerēt unikālu URL katra produkta lapai. Tradicionāli tas izskatīsies šādi: /products/id123. Un id būs ietverts tā dinamiskajā daļā (ar pašu maršrutu mēs nodarbosimies nedaudz vēlāk).

Tātad, ProductPage.jsx izveidosim tukšu komponentu ProductPage:

export const ProductPage = () => {}

Pirmā lieta, ko mēs šeit darīsim - izmantosim hoku useParams, lai iegūtu dinamisko URL daļu produkta lapai, uz kuras mēs atrodamies:

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

Tālāk pēc iegūtā id mēs meklēsim vajadzīgo produktu slice products store, izmantojot mums jau pazīstamo hoku useSelector:

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

Neaizmirsīsim importēt abus hokus failā:

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

Ja vajadzīgā produkta nebūs (piemēram, lietotājs ievadīja nekorektu adresi), tad mēs parādīsim informāciju par to ekrānā. Šajā solī kods komponentam ProductPage izskatīsies šādi:

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

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

	if (!product) {
		return <p>Nav tāda produkta</p>
	}
}

Un mums atliek tikai parādīt iegūtos produkta datus maketā:

return (
	<div>
		<h2>{product.name}</h2>
		<p>Apraksts: {product.desc}</p>
		<p>Cena: {product.price}</p>
		<p>Daudzums: {product.amount}</p>
	</div>
)

Atveriet savu studentu lietotni. Mapē students izveidojiet failu StudentPage.jsx, kurā jūs saņemsit un parādīsiet informāciju par izvēlēto studentu.

Ar react-redux hoka useSelector palīdzību iegūstiet nepieciešamo informāciju par studentu, kā parādīts nodarbībā.

Komponentā izvadiet iegūto informāciju par studentu ekrānā.