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 хукін пайдаланып, сабақта көрсетілгендей, студент туралы қажетті ақпаратты алыңыз.

Компонентте студент туралы алынған ақпаратты экранда шығарыңыз.