Redux-də Məhsul Səhifəsi

Bu dərsdə biz konkret məhsul haqqında məlumat çıxarışı üçün ayrıca səhifə edəcəyik.

Məhsullarla olan tətbiqimizi açaq və products qovluğunda ProductPage.jsx faylını yaradaq. Xatırladığınız kimi, hər bir məhsulumuz unikal id-ə malikdir. Bu id sayəsində hər bir məhsul üçün unikal URL yarada biləcəyik. Ənənəvi olaraq belə görünəcək: /products/id123. Və id onun dinamik hissəsində yer alacaq (marşrutlaşdırmanın özünə bir az sonra baxacıq).

Beləliklə, gəlin ProductPage.jsx faylında boş ProductPage komponentini yaradaq:

export const ProductPage = () => {}

Burada edəcəyimiz ilk şey - üzərində olduğumuz məhsul səhifəsi üçün URL-in dinamik hissəsini çıxarmaq üçün useParams hook-undan istifadə etmək olacaq:

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

Daha sonra əldə edilən id əsasında, artıq tanış olduğumuz useSelector hook-undan istifadə edərək, store-dakı products slice-ında lazımi məhsulu axtaracıq:

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

Hər iki hook-u fayla import etməyi unutmayaq:

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

Əgər bizə lazım olan məhsul tapılmasa (məsələn, istifadəçi səhv ünvan daxil edibsə), onda bu barədə məlumatı ekranda çıxardacıq. Bu mərhələdə ProductPage komponenti üçün kod belə görünməlidir:

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

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

	if (!product) {
		return <p>Belə bir məhsul yoxdur</p>
	}
}

Və bizə yalnız əldə edilmiş məhsul məlumatlarını verilişdə çıxartmaq qalır:

return (
	<div>
		<h2>{product.name}</h2>
		<p>Təsvir: {product.desc}</p>
		<p>Qiymət: {product.price}</p>
		<p>Miqdar: {product.amount}</p>
	</div>
)

Tələbələrlə olan tətbiqinizi açın. students qovluğunda StudentPage.jsx faylını yaradın, bu faylda seçilmiş tələbə haqqında məlumat əldə edib çıxardacaqsınız.

react-redux-un useSelector hook-u vasitəsilə, dərsdə göstərildiyi kimi, tələbə haqqında lazımi məlumatı əldə edin.

Komponentdə əldə edilmiş tələbə məlumatını ekranda çıxardın.