Ukurasa wa Mchuuzi kwenye Redux

Kazi imebaki kidogo. Hebu kwenye somo hili tufanye jambo la mwisho - tuongeze kwenye programu yetu ukurasa tofauti kwa kila mchuuzi. Hapa kutakuwa na tu matendo ambayo tayari unayafahamu. Twende kazini.

Wacha tufungue programu yetu ya bidhaa, na kwenye hayo folda sellers. Tunda faili SellerPage.jsx ndani ya folda hii. Sasa tuanze kuandika msimbo SellerPage kwa kituzi chetu:

export const SellerPage = () => {}

Kwanza tutapata kitambulisho (id) cha mchuuzi na kwa kutumia hicho tutapata kitu cha mchuuzi anayehitajika kwenye kipande (slice):

export const SellerPage = () => {
	let params = useParams()
	const { sellerId } = params

	const seller = useSelector((state) => selectSellerById(state, sellerId))
}

Kisha, chini zaidi kwenye msimbo wa SellerPage baada ya kupata mchuuzi tutapata bidhaa zote, kisha tuchague kati yazo zile tu, ambazo zimewekwa na mchuuzi huyo:

const productsOfSeller = useSelector((state) => {
	const allProducts = selectAllProducts(state)
	return allProducts.filter((product) => product.seller === sellerId)
})

Kisha kutoka kwa majina ya bidhaa zilizochaguliwa tutaunda orodha kwa kutumia map. Na jina la kila bidhaa kwenye orodha hii litakuwa kiungo (link) kinachoelekeza kwenye ukurasa wa bidhaa hiyo:

const productNames = productsOfSeller.map((product) => (
	<li key={product.id}>
		<Link to={`/products/${product.id}`}>{product.name}</Link>
	</li>
))

Na mwishoni mwa msimbo wa SellerPage turudishe muundo (markup): kichwa (heading) chenye jina la mchuuzi na orodha ya bidhaa, ambazo mchuuzi huyo ameweka:

return (
	<div>
	<h2>Mchuuzi: {seller.name}</h2>

	<ul>{productNames}</ul>
	</div>
)

Bila shaka tunahitaji pia njia (route) kwa ajili ya ukurasa wa mchuuzi. Wacha tufungue faili App.jsx na tuiongeze mwisho kwenye njia ndogo (child routes):

{
	path: '/sellers/:sellerId',
	element: <SellerPage />,
},

Usisahau kuingiza vilima (hooks) na vituzi muhimu kwenye SellersPage.jsx na App.jsx.

Wacha tuzindue programu yetu, tulaze bidhaa, kisha kwenye menyu ya upande wa kushoto bofya kiungo cha 'Wauzaji'. Sasa tunaweza kuingia kwenye ukurasa wa mchuuzi yeyote, kwa kubofya jina lake, kisha kwenye ukurasa wake kuona bidhaa zake zote. Na, kwa kubofya bidhaa yoyote kati ya bidhaa zake, tutaingia kwenye ukurasa wa ile bidhaa.

Kwa sasa hivi ndiyo yote. Tumejifunza misingi ya Redux kwa ajili ya kuunda programu na hata kwa kina kidogo zaidi. Tumefahamu zana mbalimbali muhimu. Nakutakiaia heri katika kuunda programu zako za Redux!

Fungua programu yako ya wanafunzi. Baada ya kusoma nyenzo za somo, ndani ya folda teachers tunda faili TeacherPage.jsx. Kwenye msimbo wa kituzi TeacherPage pata kitu cha mwalimu anayehitajika na wanafunzi wote wa mwalimu huyo. Kwa kutumia map unda kutoka kwao orodha, acha jina kamili la kila mwanafunzi liwe kiungo kinachoelekeza kwenye ukurasa wa mwanafunzi huyo.

Acha kwenye muundo unaorudishwa uwe na kichwa chenye jina kamili la mwalimu, chini kutakuwa na kichwa kidogo - chenye somo, analohitimu, na chini zaidi orodha ya wanafunzi wake.

Kwenye App.jsx unganisha njia ndogo (child route) nyingine kwa ajili ya ukurasa wa mwalimu.

Zindua programu yako na uhakikishe, kwamba kila kitu kinafanya kazi.