Маҳсулот барои саҳифа дар 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-и гирифташуда мо маҳсулоти заруриро дар порчаи 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 маълумоти заруриро дар бораи донишҷӯ гиред, ҳамон тавре ки дар дарс нишон дода шуд.

Дар компонешт маълумоти гирифташударо дар бораи донишҷӯ ба экран хабар диҳед.