Lista e Shitësve në Redux

Në mësimet e mëparshme kemi përfunduar materialin bazë. Tani me ndihmën e thunk ne marrim listën e produkteve nga serveri dhe mund t'i ruajmë në server produktet e reja. Le të merremi me shitësit. Në fund të fundit, ne marrim të dhëna edhe për ta. Le të krijojmë një faqe të veçantë me listën e shitësve.

Le të hapim aplikacionin tonë të produkteve, dhe në të dosjen sellers. Le të krijojmë në këtë dosje fajllin SellersList.jsx. Këtu do të përdorim useSelector, Link dhe selectAllSellers, kodin e të cilit ne do ta shkruajmë në sellersSlice.js pak më vonë:

import { useSelector } from 'react-redux'
import { Link } from 'react-router-dom'
import { selectAllSellers } from './sellersSlice'

Më pas le të krijojmë vetë SellersList. Në të ne do të marrim të gjithë shitësit me ndihmën e hook useSelector, pastaj do të marrim pjesën vizuale për listën e shitësve në ciklin map, ku çdo emër i shitësit do të na çojë në faqen e tij. Dhe në fund do të kthejmë pjesën vizuale me titullin dhe listën e marrë:

export const SellersList = () => {
	const sellers = useSelector(selectAllSellers)
	const sellersToRender = sellers.map((seller) => (
		<li key={seller.id}>
			<Link to={`/sellers/${seller.id}`}>{seller.name}</Link>
		</li>
	))

	return (
		<div>
			<h2>Shitësit:</h2>

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

Më pas le të shkojmë në fajllin sellersSlice.js dhe sipas analogjisë me selektorët në productsSlice.js le të krijojmë në fund të fajllit dy selektorë pas eksportit të reducer:

export const selectAllSellers = (state) => state.sellers

export const selectSellerById = (state, sellerId) =>
state.sellers.find((seller) => seller.id === sellerId)

Tani na duhet të përshkruajmë rrugën për faqen me listën, për këtë le të hapim fajllin App.jsx dhe në grupin e rrugëve të fëmijëve children le të shtojmë një objekt tjetër (mos harroni të importoni komponentin SellersList):

{
	path: '/sellers',
	element: <SellersList />,
},

Që lidhja jonë 'Shitësit' në menu të fillojë të funksionojë, le të shkojmë në fajllin root.jsx (sa kohë që ka kaluar... ) dhe të zëvendësojmë tagun a me elementin NavLink:

<NavLink to="/sellers" end>
	Shitësit
</NavLink>

Dhe e fundit. Që në menunë tonë të theksohet lidhja aktive, dhe të jetë e kuptueshme në cilën faqe jemi, ne do të shtojmë stil në index.css:

nav a.active {
	color: purple;
}

Le të nisim aplikacionin tonë. Tani ne mund të shkojmë në faqen me shitësit, duke klikuar në 'Shitësit' në menu. Para së gjithash, është e nevojshme të klikoni në 'Produktet' në menu, përndryshe produktet tanë nuk do të ngarkohen. Në mësimin e ardhshëm ne do të krijojmë një faqe për çdo shitës dhe me këtë do të përfundojmë studimin e këtij tutoriali për Redux.

Hapni aplikacionin tuaj me studentët. Duke studiuar materialin e mësimit, në dosjen teachers krijoni fajllin TeachersList.jsx. Me ndihmën e këtij komponenti ju do të shfaqni listën e mësuesve. Importoni në të komponentët dhe hookët e nevojshëm.

Shkruani kodin për komponentin TeachersList, merrni në të të gjithë mësuesit dhe bëni listën e mësuesve teachersToRender, le të në çdo rresht të kësaj liste të shfaqen mbiemrat dhe inicialet e tyre, dhe në kllapa lëndën, të cilën ata e japin. Le të çdo emër i plotë të jetë një lidhje, e cila të çojë në një faqe të veçantë për çdo mësues. Më pas në fund të kodit të komponentit ktheni pjesën vizuale me titullin dhe listën e krijuar.

Në fund të fajllit teachersSlice.js krijoni disa funksione-selektorë selectAllTeachers dhe selectTeacherById, siç tregohet në mësim.

Në App.jsx lidhni një rrugë fëmijë tjetër për faqen me mësuesit.

Në fajllin root.jsx në menu për 'Mësuesit' zëvendësoni tagun a me NavLink, siç tregohet në mësim. Bëni që lidhja aktive në menu të theksohet në një farë mënyre, duke shtuar për këtë stil në index.css.