Ukurasa wa Bidhaa katika Redux

Katika somo hili tutatengeneza ukurasa tofauti wa kuonyesha taarifa kuhusu bidhaa mahususi.

Fungua programu yetu ya bidhaa na kwenye folda products unda faili ProductPage.jsx. Kama unavyokumbuka, kila bidhaa yetu ina kitambulisho cha kipekee. Kutokana na kitambulisho hiki cha kipekee tutaweza kutengeneza URL ya kipekee ya ukurasa wa kila bidhaa. Kwa mila itaonekana kama: /products/id123. Na kitambulisho kitakuwemo kwenye sehemu yake inayobadilika (sisi tutajishughulisha na njia baadaye kidogo).

Basi, wacha katika ProductPage.jsx tuunde kiunganishi tupu ProductPage:

export const ProductPage = () => {}

Jambo la kwanza tutakalofanya hapa - tutatumia ndoano useParams, ili kuvuta sehemu inayobadilika ya URL kwa ukurasa wa bidhaa, ambayo tupo:

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

Ifuatayo kwa kutumia kitambulisho kilichopatikana tutatafuta bidhaa inayohitajika kwenye kipande products kwenye kuhifadhi, tukitumia ndoano unayojua tayari useSelector:

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

Tusisahau kuagiza ndoano zote mbili kwenye faili:

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

Iwapo bidhaa tunayohitaji haitakuwepo (kwa mfano, mtumiaji aliandika anuani isiyo sahihi), basi tutaonyesha taarifa kuhusu hilo kwenye skrini. Katika hatua hii kanuni za kiunganishi ProductPage inapaswa kuonekana hivi:

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

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

	if (!product) {
		return <p>Hakuna bidhaa kama hiyo</p>
	}
}

Na inabakia tu kuonyesha data zilizopatikana za bidhaa kwenye muundo:

return (
	<div>
		<h2>{product.name}</h2>
		<p>Maelezo: {product.desc}</p>
		<p>Bei: {product.price}</p>
		<p>Kiasi:{product.amount}</p>
	</div>
)

Fungua programu yako ya wanafunzi. Kwenye folda students unda faili StudentPage.jsx, ambamo utapata na kuonyesha taarifa kuhusu mwanafunzi aliyechaguliwa.

Kwa kutumia ndoano ya react-redux useSelector pata taarifa muhimu kuhusu mwanafunzi, kama inavyoonyeshwa kwenye somo.

Onyesha kwenye kiunganishi taarifa zilizopatikana kuhusu mwanafunzi kwenye skrini.