Seznam prodajalcev v Redux

V prejšnjih lekcijah smo zaključili z osnovno vsebino. Zdaj s pomočjo thunk dobimo seznam produktov s strežnika in jih lahko shranimo na strežnik. Poglejmo si prodajalce. Navsezadnje dobimo podatke tudi zanje. Naredimo ločeno stran s seznamom prodajalcev.

Odprimo našo aplikacijo s produkti, v njej pa mapo sellers. V tej mapi ustvarimo datoteko SellersList.jsx. Tukaj bomo uporabili useSelector, Link in selectAllSellers, katere kodo bomo napisali v sellersSlice.js malo kasneje:

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

Nato ustvarimo sam SellersList. V njem bomo pridobili vse prodajalce s pomočjo kavlja useSelector, nato pa pridobili prikaz seznama prodajalcev v zanki map, pri čemer bo vsako ime prodajalca vodilo na njegovo stran. Na koncu vrnemo prikaz z naslovom in pridobljenim seznamom:

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>
	)
}

Nato pojdimo v datoteko sellersSlice.js in po analogiji z selektorji v productsSlice.js ustvarimo na samem koncu datoteke dva selektorja po izvozu reducerja:

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

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

Zdaj moramo določiti pot za stran s seznamom, za to odprimo datoteko App.jsx in v matriko podrejenih poti children dodajmo še en objekt (ne pozabite uvoziti komponente SellersList):

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

Da bo naša povezava 'Sellers' v meniju delovala, pojdimo v datoteko root.jsx (kako dolgo je že minilo ... ) in zamenjajmo oznako a z elementom NavLink:

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

In še zadnje. Da bi se v našem meniju označila aktivna povezava in bi bilo razvidno, na kateri strani smo, dodajmo slog v index.css:

nav a.active {
	color: purple;
}

Zaženimo našo aplikacijo. Zdaj lahko greste na stran s prodajalci s klikom na 'Sellers' v meniju. Pred tem je seveda treba klikniti na 'Products' v meniju, sicer se naši produkti ne bodo naložili. V naslednji lekciji bomo naredili stran za vsakega prodajalca in s tem zaključili študij tega učbenika o Redux.

Odprite vašo aplikacijo s študenti. Po preučitvi gradiva lekcije, v mapi teachers ustvarite datoteko TeachersList.jsx. S pomočjo te komponente boste prikazali seznam učiteljev. Uvozite vanjo potrebne komponente in kavlje.

Napišite kodo za komponento TeachersList, v njej pridobite vse učitelje in naredite seznam učiteljev teachersToRender, naj v vsaki vrstici tega seznama prikažete njihove priimke in začetnice, v oklepajih pa predmet, ki ga predavajo. Naj bodo vsa imena skupaj povezava, ki vodi na ločeno stran za vsakega učitelja. Nato na koncu kode komponente vrnite prikaz z naslovom in ustvarjenim seznamom.

Na koncu datoteke teachersSlice.js ustvarite par funkcij-selektorjev selectAllTeachers in selectTeacherById, kot je prikazano v lekciji.

V App.jsx povežite še eno podrejeno pot za stran z učitelji.

V datoteki root.jsx v meniju za 'Teachers' zamenjajte oznako a z NavLink, kot je prikazano v lekciji. Naredite tako, da se aktivna povezava v meniju na nek način označi, z dodajanjem stilov v index.css.