Lista vânzătorilor în Redux

În lecțiile anterioare am terminat cu materialul principal. Acum folosind thunk obținem lista de produse de la server și putem salva un nou produs pe server. Să ne ocupăm de vânzători. La urma urmei, primim date și pentru ei. Să facem o pagină separată cu lista vânzătorilor.

Deschideți aplicația noastră cu produse, iar în ea folderul sellers. Să creăm în acest folder fișierul SellersList.jsx. Aici vom folosi useSelector, Link și selectAllSellers, al cărui cod îl scriem în sellersSlice.js mai târziu:

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

Apoi creăm SellersList însuși. În el obținem toți vânzătorii folosind hook-ul useSelector, apoi obținem markup-ul pentru lista de vânzători în ciclul map, iar fiecare nume de vânzător va duce către pagina lui. Și la final returnăm markup-ul cu titlul și lista obținută:

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>Vânzători:</h2>

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

Apoi intrăm în fișierul sellersSlice.js și prin analogie cu selectorii din productsSlice.js creăm la sfârșitul fișierului doi selectori după exportul reducer-ului:

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

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

Acum trebuie să configurăm ruta pentru pagina cu lista, pentru aceasta deschidem fișierul App.jsx și în array-ul de rute copil children adăugăm încă un obiect (nu uitați să importați componenta SellersList):

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

Pentru ca link-ul nostru 'Vânzători' din meniu să funcționeze, să intrăm în fișierul root.jsx (cât de demult a fost... ) și să înlocuim tag-ul a cu elementul NavLink:

<NavLink to="/sellers" end>
	Vânzători
</NavLink>

Și ultimul lucru. Pentru ca în meniul nostru să fie evidențiat link-ul activ și să fie clar pe ce pagină ne aflăm, adaugăm un stil în index.css:

nav a.active {
	color: purple;
}

Să pornim aplicația noastră. Acum putem intra pe pagina cu vânzători, făcând clic pe 'Vânzători' din meniu. Bineînțeles, mai întâi trebuie să faceți clic pe 'Produse' în meniu, altfel produsele noastre nu se vor încărca. În lecția următoare vom face o pagină pentru fiecare vânzător și cu asta vom încheia studiul acestui ghid despre Redux.

Deschideți aplicația voastră cu studenții. După ce ați studiat materialul lecției, în folderul teachers creați fișierul TeachersList.jsx. Cu ajutorul acestei componente veți afișa lista cadrelor didactice. Importați în el componentele și hook-urile necesare.

Scrieți codul pentru componenta TeachersList, obțineți în ea toți cadrele didactice și faceți lista cadrelor didactice teachersToRender, lăsați în fiecare rând al acestei liste să fie afișate numele și inițialele lor, iar în paranteze materia pe care o predau. Lăsați fiecare nume împreună să fie un link care duce către o pagină separată pentru fiecare cadru didactic. Apoi la sfârșitul codului componentei returnați markup-ul cu titlul și lista creată.

La sfârșitul fișierului teachersSlice.js creați o pereche de funcții-selector selectAllTeachers și selectTeacherById, așa cum este arătat în lecție.

În App.jsx conectați încă o rută copil pentru pagina cu cadrele didactice.

În fișierul root.jsx în meniu pentru 'Cadre didactice' înlocuiți tag-ul a cu NavLink, așa cum este arătat în lecție. Faceți ca link-ul activ din meniu să fie evidențiat cumva, adăugând pentru aceasta stiluri în index.css.