Redux да продукт учун саҳифа

Бу дарсда биз махсус продукт учун маълумот чиқарувчи алоҳида саҳифа яратамиз.

Махсулотларимиз бор иловани очиб, products папкасида ProductPage.jsx файлини яратамиз. Ёдингизда бўлсики, ҳар бир махсулотимизнинг уникал id рақами бор. Шу id ёрдамида биз ҳар бир продукт учун уникал URL манзил ярата оламиз. Ананвий тарзда у шундай кўринади: /products/id123. Ва id унинг динамик қисмида бўлади (маршрут билан биз кейинроқ шуғулланамиз).

Ҳозир, ProductPage.jsx файлида буш ProductPage компонентини яратамиз:

export const ProductPage = () => {}

Биз бу ерда биринчи бўлиб useParams ҳукидан фойдаланамиз, биз турган продукт саҳифаси учун URL нинг динамик қисмини олиш учун:

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

Кейин, олинган id бўйича биз store даги products слайсидан бизга керакли продуктни излаймиз, бизга таниш бўлган useSelector ҳукидан фойдаланиб:

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

Иккала ҳукни ҳам файлга импорт қилишни унутмаймиз:

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

Агар бизга керакли продукт топилмаса (масалан, фойдаланувчи нотўғри манзил киритган бўлса), бу ҳақда маълумотни экранга чиқарамиз. Қадамда ProductPage компоненти учун код шундай кўриниши керак:

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

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

	if (!product) {
		return <p>Бундай продукт мавжуд эмас</p>
	}
}

Ва бизга фақат олинган продукт маълумотларини версткада чиқариш қолади:

return (
	<div>
		<h2>{product.name}</h2>
		<p>Тавсиф: {product.desc}</p>
		<p>Нарх: {product.price}</p>
		<p>Миқдори: {product.amount}</p>
	</div>
)

Студентларингиз бор иловани очинг. students папкасида StudentPage.jsx файлини яратинг, у ерда сиз танланган студент ҳақида маълумот олувчи ва чиқарувчи бўласиз.

react-redux нинг useSelector ҳуки ёрдамида дарсда кўрсатилгани каби студент ҳақида керакли маълумотни олинг.

Компонентда олинган студент маълумотини экранга чиқаринг.