პროდუქტის გვერდი 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 store-ში, ჩვენთვის უკვე ნაცნობი ჰუკის 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 დახმარებით მიიღეთ საჭირო ინფორმაცია სტუდენტის შესახებ, როგორც ეს ნაჩვენები იყო გაკვეთილზე.

კომპონენტში გამოიტანეთ ეკრანზე მიღებული ინფორმაცია სტუდენტის შესახებ.