Spisak prodavaca u Redux-u

Na prethodnim časovima smo završili sa osnovnim materijalom. Sada uz pomoć thunk-a dobijamo spisak proizvoda sa servera i možemo sačuvati na serveru novi proizvod. Hajde da se pozabavimo prodavcima. Na kraju, mi dobijamo podatke i za njih. Hajde da napravimo posebnu stranicu sa spiskom prodavaca.

Otvorimo našu aplikaciju sa proizvodima, a u nej folder sellers. Kreirajmo u ovom folderu fajl SellersList.jsx. Ovde ćemo koristiti useSelector, Link i selectAllSellers, čiji kod ćemo napisati u sellersSlice.js malo kasnije:

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

Zatim kreirajmo sam SellersList. U njemu ćemo dobiti sve prodavce uz pomoć huka useSelector, zatim dobiti markup za spisak prodavaca u petlji map, pri čemu će svaki naziv prodavca nas voditi na njegovu stranicu. I na kraju vratiti markup sa naslovom i dobijenim spiskom:

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>Sellers:</h2>

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

Zatim otvorimo fajl sellersSlice.js i po analogiji sa selektorima u productsSlice.js kreirajmo na samom kraju fajla dva selektora nakon izvoza reducer-a:

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

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

Sada nam je neophodno da definišemo rutu za stranicu sa spiskom, za to otvorimo fajl App.jsx i u niz podređenih ruta children dodajmo još jedan objekat (ne zaboravite da importujete komponentu SellersList):

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

Kako bi naša veza 'Sellers' u meniju počela da radi, hajde da otvorimo fajl root.jsx (kako je to davno bilo... ) i zamenimo tag a elementom NavLink:

<NavLink to="/sellers" end>
	Sellers
</NavLink>

I poslednje. Kako bi se u našem meniju istakla aktivna veza, i bilo jasno na kojoj se stranici nalazimo, pridodaćemo stil u index.css:

nav a.active {
	color: purple;
}

Pokrenimo našu aplikaciju. Sada možemo da odemo na stranicu sa prodavcima, klikom na 'Sellers' u meniju. Naravno, pre toga treba da kliknemo na 'Products' u meniju, inače se naši proizvodi neće učitati. Na sledećem času ćemo napraviti stranicu za svakog prodavca i time završiti proučavanje ovog udžbenika po Redux-u.

Otvorite vašu aplikaciju sa studentima. Nakon proučavanja materijala časa, u folderu teachers kreirajte fajl TeachersList.jsx. Uz pomoć ove komponente ćete prikazivati spisak nastavnika. Importujte u nju neophodne komponente i hukove.

Napišite kod za komponentu TeachersList, dobijte u njoj sve nastavnike i napravite spisak nastavnika teachersToRender, neka u svakom redu ovog spiska budu prikazani njihovi prezimena i inicijali, a u zagradama predmet koji predaju. Neka svako ime i prezime zajedno budu veza koja vodi na posebnu stranicu za svakog nastavnika. Zatim na kraju koda komponente vratite markup sa naslovom i kreiranim spiskom.

Na kraju fajla teachersSlice.js kreirajte par funkcija-selektora selectAllTeachers i selectTeacherById, kao što je prikazano na času.

U App.jsx povežite još jednu podređenu rutu za stranicu sa nastavnicima.

U fajlu root.jsx u meniju za 'Teachers' zamenite tag a NavLink-om, kao što je prikazano na času. Učinite tako da se aktivna veza u meniju na neki način istakne, pridodajući za to stilove u index.css.