Redux'теги продукт үчүн баракчасы

Бул сабакта биз белгилүү бир продукт үчүн маалымат чыгаруу үчүн өзүнчө баракча жасайбыз.

Продукттор менен тиркемебизди ачып, products папкасынын ичинде ProductPage.jsx файлын түзөбүз. Эсиңизде болсун, ар бир продукт уникалдуу id'ге ээ. Ушул id'дин жардамы менен ар бир продукт үчүн уникалдуу URL баракчасын түзө алабыз. Адатта ал мындай көрүнөт: /products/id123. Жана id анын динамикалык бөлүгүндө болот (маршрут менен биз кийинчерээк алектенебиз).

Ошентип, ProductPage.jsx ичинде биз бош компонент ProductPage түзөбүз:

export const ProductPage = () => {}

Бул жерде биринчи жасай турган ишибиз - биз турган продукт баракчасынын динамикалык URL бөлүгүн алуу үчүн useParams хугунан пайдаланабыз:

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>Description: {product.desc}</p>
		<p>Price: {product.price}</p>
		<p>Amount:{product.amount}</p>
	</div>
)

Студенттер менен тиркемеңизди ачыңыз. students папкасынын ичинде StudentPage.jsx файлын түзүңүз, анда сиз тандалган студент жөнүндө маалымат алып, чыгарасыз.

react-redux'тун useSelector хугунун жардамы менен сабакта көрсөтүлгөндөй студент жөнүндө керектүү маалыматты алыңыз.

Компонентте студент жөнүндө алынган маалыматты экранга чыгарыңыз.