Faqja e Shitësit në Redux

Mbetet pak për të bërë. Le të bëjmë gjënë e fundit në këtë orë mësimi - le të shtojmë në aplikacionin tonë një faqe të veçantë për çdo shitës. Këtu do të ketë vetëm veprime tashmë të njohura për ju. Le të fillojmë.

Le të hapim aplikacionin tonë me produktet, dhe në të dosjen sellers. Le të krijojmë në këtë dosje fajllin SellerPage.jsx. Tani le të fillojmë të shkruajmë kodin SellerPage për komponentin tonë:

export const SellerPage = () => {}

Për fillim le të marrim id e shitësit dhe me të le të gjejmë objektin e shitësit të duhur në slice:

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

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

Më pas më poshtë në kod për SellerPage pasi të kemi marrë shitësin, do të marrim të gjitha produktet, dhe pastaj do të zgjedhim prej tyre vetëm ato, që janë postuar nga ky shitës:

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

Dhe më pas nga emrat e produkteve të zgjedhur do të formojmë një listë duke përdorur map. Ku çdo emër produkti në këtë listë do të jetë një link drejt faqes së atij produkti:

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

Dhe në fund të kodit për SellerPage le të kthejmë layout-in: titullin me emrin e shitësit dhe listën e produkteve, që i ka postuar ky shitës:

return (
	<div>
	<h2>Shitësi: {seller.name}</h2>

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

Patjetër na duhet edhe një rrugë për faqen e shitësit. Le të hapim fajllin App.jsx dhe ta shtojmë atë sist fundit te rrugët fëmijë:

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

Mos harroni të importoni hooks-at e nevojshëm dhe komponentët në SellersPage.jsx dhe App.jsx.

Le të startojmë aplikacionin tonë, le të ngarkojmë produktet, e më pas në menunë majtas të klikojmë te linku 'Sellers'. Tani ne mundemi të hyjmë në faqen e çdo shitësi, duke klikuar te emri i tij, e më pas në faqen e tij të shohim të gjitha produktet e tij. Dhe, duke klikuar te çdo produkt i tij, do të hyjmë në faqen e atij produkti.

Kjo ishte e tëra për tani. Ne kemi mësuar bazat e Redux për krijimin e aplikacionit dhe madje pak më thellë. Jemi njohur me instrumente të ndryshme të dobishme. Ju uroj fat në krijimin e aplikacioneve tuaja Redux!

Hapni aplikacionin tuaj me studentët. Pasi keni studiuar materialin e mësimit, në dosjen teachers krijoni fajllin TeacherPage.jsx. Në kod të komponentit TeacherPage merreni objektin e mësuesit të duhur dhe të gjithë studentët e këtij mësuesi. Me ndihmën e map krijoni prej tyre një listë, le të jetë Emri, Mbiemri i çdo studenti një link drejt faqes së atij studenti.

Le të ketë në layout-in e kthyer titull me Emrin, Mbiemrin e mësuesit, më poshtë le të ketë një titull më të vogël - me lëndën, që ai jep, e edhe më poshtë lista e studentëve të tij.

Në App.jsx lidhni edhe një rrugë fëmijë për faqen e mësuesit.

Startoni aplikacionin tuaj dhe u sigurohuni që gjithçka funksionon.