Redux-daky önümiň sahypasy

Bu sapakda kesgitlenen önüm barada maglumat görkezmek üçin aýratyn sahypa dözeris.

Önümler bilen bolan aplikasiýamyzy açalyň we products papkasynyň içinde ProductPage.jsx faýlyny dözeris. Ýatda bolşy ýaly, her önümiziň özboluşly id-si bar. Bu id bilen her önüm üçin özboluşly URL salgysyny dözmäge mümkinçilik alarys. Adaty görnüşde ol şeýle bolar: /products/id123. We id onuň dinamiki böleginde bolar (marsrutyň özi bilen birnäçe wagtdan soň meşgullanarys).

Şeýlelik bilen, geliň ProductPage.jsx faýlynda boş komponent ProductPage dözeris:

export const ProductPage = () => {}

Bu ýerde ilkinji etjek zadymyz - biz ýerleşýän önüm sahypasynyň URL salgysynyň dinamiki bölegini aýyrmak üçin useParams çeňňeginden peýdalanyp:

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

Indiki etapda alnan id-e görä, biz store-daky products slýasynyň içinde zerur önümi gözläris, tanaşyk bolan useSelector çeňňeginden peýdalanyp:

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

Her iki çeňňegi faýla import etmegi ýatdan çykarma:

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

Eger-de zerur önümimiz ýok bolsa (mysal üçin, ulanyjy nädogry salgy girizse), onda muny ekrana görkezeris. Bu ädimde ProductPage komponenti üçin kod şeýle görünmeli:

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

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

	if (!product) {
		return <p>Şeýle önüm ýok</p>
	}
}

We biz alnan önüm maglumatlaryny sahypanyň görnüşine çykarmak bilen ýeke galýarys:

return (
	<div>
		<h2>{product.name}</h2>
		<p>Düşündiriş: {product.desc}</p>
		<p>Bahasy: {product.price}</p>
		<p>Mukdary:{product.amount}</p>
	</div>
)

Studentler bilen bolan aplikasiýaňyzy açyň. students papkasynyň içinde StudentPage.jsx faýlyny dözuň, onda saýlanan student barada maglumat alyp we görkezeris.

react-redux-nyň useSelector çeňňegi kömegi bilen sapakda görkezilişi ýaly, student barada zerur maglumaty alyň.

Komponentde alynan student maglumatlaryny ekrana görkeziň.