Zoznam predajcov v Reduxe

Na predchádzajúcich hodinách sme skončili s hlavnou náplňou. Teraz pomocou thunku získavame zoznam produktov zo servera a môžeme uložiť nový produkt na server. Poďme sa pozrieť na predajcov. Veď získavame údaje aj pre nich. Urobme samostatnú stránku so zoznamom predajcov.

Otvorme našu aplikáciu s produktami a v nej priečinok sellers. Vytvorme v tomto priečinku súbor SellersList.jsx. Tu budeme používať useSelector, Link a selectAllSellers, ktorého kód napíšeme v sellersSlice.js o čosi neskôr:

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

Ďalej vytvorme samotný SellersList. V ňom získame všetkých predajcov pomocou hooku useSelector, potom získame verštovanie pre zoznam predajcov v cykle map, pričom každý názov predajcu nás bude viesť na jeho stránku. A na konci vráťme verštovanie s nadpisom a získaným zoznamom:

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

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

Potom prejdime do súboru sellersSlice.js a analogicky s selektormi v productsSlice.js vytvorme na samom konci súboru dva selektory po exporte redukora:

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

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

Teraz musíme dopísať trasu pre stránku so zoznamom, preto otvorme súbor App.jsx a do poľa podradených trás children pridajme ďalší objekt (nezabudnite importovať komponent SellersList):

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

Aby nám odkaz 'Predajcovia' v menu fungoval, poďme do súboru root.jsx (ako dávno to bolo ... ) a nahraďme tag a elementom NavLink:

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

A posledné. Aby sa v našom menu zvýraznil aktívny odkaz a bolo zrejmé, na akej stránke sa nachádzame, pridáme štýl do index.css:

nav a.active {
	color: purple;
}

Spustíme našu aplikáciu. Teraz môžeme ísť na stránku s predajcami kliknutím na 'Predajcovia' v menu. Samozrejme, najprv je potrebné kliknúť na 'Produkty' v menu, inak sa naše produkty nenačítajú. V nasledujúcej lekcii urobíme stránku pre každého predajcu a tým ukončíme štúdium tohto tutoriálu pre Redux.

Otvorte svoju aplikáciu so študentmi. Po preštudovaní materiálov lekcie vytvorte v priečinku teachers súbor TeachersList.jsx. Pomocou tohto komponentu budete zobrazovať zoznam učiteľov. Importujte do neho potrebné komponenty a hooky.

Napíšte kód pre komponent TeachersList, získajte v ňom všetkých učiteľov a vytvorte zoznam učiteľov teachersToRender, nech v každom riadku tohto zoznamu sa zobrazia ich priezviská a iniciály a v zátvorkách predmet, ktorý učia. Nech každé celé meno spolu tvorí odkaz, ktorý vedie na samostatnú stránku pre každého učiteľa. Potom na konci kódu komponentu vráťte verštovanie s nadpisom a vytvoreným zoznamom.

Na konci súboru teachersSlice.js vytvorte pár funkcií-selektorov selectAllTeachers a selectTeacherById, ako je ukázané v lekcii.

V App.jsx pripojte ďalšiu podradenú trasu pre stránku s učiteľmi.

V súbore root.jsx v menu pre 'Učitelia' nahraďte tag a NavLink, ako je ukázané v lekcii. Urobte to tak, aby sa aktívny odkaz v menu nejako zvýraznil, pridaním štýlov do index.css.