Redux-da mahsulot sahifasi

Ushbu darsda biz ma'lum bir mahsulot haqida ma'lumot chiqarish uchun alohida sahifa yaratamiz.

Mahsulotlar ilovamizni ochamiz va products papkasida ProductPage.jsx faylini yaratamiz. Esingizda bo'lsa, har bir mahsulotimiz noyob id ga ega. Shu id tufayli biz har bir mahsulot uchun noyob URL manzilini yaratishimiz mumkin. An'anaviy tarzda u quyidagicha ko'rinadi: /products/id123. Va id uning dinamik qismida bo'ladi (biz marshrut bilan keyinroq shug'ullanamiz).

Shunday qilib, keling ProductPage.jsx faylida ProductPage bo'sh komponentini yaratamiz:

export const ProductPage = () => {}

Bu yerda biz qiladigan birinchi ish - biz joylashgan mahsulot sahifasi uchun URL ning dinamik qismini olish uchun useParams hookidan foydalanamiz:

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

Keyin, olingan id bo'yicha biz store dagi products slice ichidan bizga tanish bo'lgan useSelector hook yordamida kerakli mahsulotni qidiramiz:

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

Ikkala hook ni ham faylga import qilishni unutmaymiz:

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

Agar bizga kerakli mahsulot topilmasa (masalan, foydalanuvchi noto'g'ri manzil kiritgan), bu haqda ma'lumotni ekranda chiqaramiz. Ushbu bosqichda ProductPage komponenti uchun kod quyidagicha ko'rinishi kerak:

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

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

	if (!product) {
		return <p>Bunday mahsulot mavjud emas</p>
	}
}

Va bizga faqat olingan mahsulot ma'lumotlarini vebsahifada chiqarish qoladi:

return (
	<div>
		<h2>{product.name}</h2>
		<p>Tavsif: {product.desc}</p>
		<p>Narx: {product.price}</p>
		<p>Miqdor: {product.amount}</p>
	</div>
)

Talabalar ilovingizni oching. students papkasida StudentPage.jsx faylini yarating, unda siz tanlangan talaba haqida ma'lumot olasiz va chiqarasiz.

react-redux ning useSelector hook i yordamida darsda ko'rsatilgandek, talaba haqida kerakli ma'lumotni oling.

Komponentda olingan talaba haqidagi ma'lumotni ekranda chiqaring.