Էջը Product-ի համար Redux-ում

Այս դասին մենք կստեղծենք առանձին էջ կոնկրետ արտադրանքի մասին տեղեկատվություն ցուցադրելու համար:

Բացենք մեր արտադրանքներով հավելվածը և products պանակում ստեղծենք ProductPage.jsx ֆայլը: Ինչպես հիշում եք, մեր յուրաքանչյուր արտադրանք ունի եզակի id: Շնորհիվ այս id-ի մենք կկարողանանք ստեղծել յուրաքանչյուր արտադրանքի համար եզակի URL հասցե: Ավանդաբար այն կունենա հետևյալ տեսքը՝ /products/id123: Եվ id-ն կպարունակվի նրա դինամիկ մասում (մենք հենց ինքնուրույն route-ով կզբաղվենք որոշ չափով ավելի ուշ):

Այսպիսով, եկեք ProductPage.jsx-ում ստեղծենք դատարկ ProductPage կոմպոնենտը:

export const ProductPage = () => {}

Առաջին բանը, որ մենք կանենք այստեղ, օգտագործելու ենք useParams hook-ը, որպեսզի դուրս բերենք էջի URL-ի դինամիկ մասը, որի վրա մենք գտնվում ենք:

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

Հաջորդը, ըստ ստացված id-ի, մենք կփնտրենք անհրաժեշտ արտադրանքը products slice-ում store-ում, օգտագործելով մեզ արդեն ծանոթ useSelector hook-ը:

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

Մի մոռանանք ներմուծել երկու hook-ներն էլ ֆայլում:

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>No such product</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 hook-ը ստացեք անհրաժեշտ տեղեկատվությունը ուսանողի մասին, ինչպես ցուցադրված է դասում:

Կոմպոնենտում ցուցադրեք ստացված տեղեկատվությունը ուսանողի մասին էկրանին: