Lijst van verkopers in Redux

In de vorige lessen zijn we klaar met de hoofdstof. Nu krijgen we met behulp van thunk een lijst van producten van de server en kunnen we een nieuw product op de server opslaan. Laten we ons bezighouden met de verkopers. We krijgen immers ook gegevens voor hen. Laten we een aparte pagina maken met een lijst van verkopers.

Open onze applicatie met producten, en daarin de map sellers. Laten we in deze map het bestand SellersList.jsx aanmaken. Hier zullen we useSelector, Link en selectAllSellers gebruiken, waarvan we de code straks in sellersSlice.js zullen schrijven:

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

Vervolgens maken we de SellersList zelf. Hierin halen we alle verkopers op met behulp van de hook useSelector, dan krijgen we de markup voor de lijst van verkopers in een map loop, waarbij elke naam van een verkoper zal leiden naar zijn pagina. En tot slot returneren we de markup met een titel en de verkregen lijst:

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

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

Daarna gaan we naar het bestand sellersSlice.js en naar analogie met de selectors in productsSlice.js maken we helemaal aan het einde van het bestand twee selectors, na het exporteren van de reducer:

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

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

Nu moeten we de route voor de pagina met de lijst instellen, hiervoor openen we het bestand App.jsx en voegen we in de array van child routes children nog een object toe (vergeet niet de component SellersList te importeren):

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

Om onze link 'Sellers' in het menu werkend te krijgen, laten we naar het bestand root.jsx gaan (het is lang geleden...) en de tag a vervangen door het element NavLink:

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

En als laatste. Om in ons menu de actieve link te markeren, en duidelijk te maken op welke pagina we zijn, voegen we een stijl toe in index.css:

nav a.active {
	color: purple;
}

Laten we onze applicatie starten. Nu kunnen we naar de pagina met verkopers gaan, door te klikken op 'Verkopers' in het menu. Natuurlijk moeten we eerst klikken op 'Products' in het menu, anders worden onze producten niet geladen. In de volgende les maken we een pagina voor elke verkoper en daarmee ronden we deze Redux tutorial af.

Open je applicatie met studenten. Bestudeer de lesmaterialen, en maak in de map teachers het bestand TeachersList.jsx aan. Met behulp van deze component ga je een lijst van docenten weergeven. Importeer er de noodzakelijke componenten en hooks in.

Schrijf de code voor de component TeachersList, haal er alle docenten in op en maak een lijst van docenten teachersToRender, laat in elke regel van deze lijst hun achternamen en initialen zien, en tussen haakjes het vak dat zij geven. Laat elke volledige naam (met initialen) een link zijn, die leidt naar een aparte pagina voor elke docent. Vervolgens return je aan het einde van de componentcode de markup met een titel en de gemaakte lijst.

Maak aan het einde van het bestand teachersSlice.js een paar selector-functies selectAllTeachers en selectTeacherById, zoals getoond in de les.

Voeg in App.jsx nog een child route toe voor de pagina met docenten.

Vervang in het bestand root.jsx in het menu voor 'Teachers' de tag a door NavLink, zoals getoond in de les. Zorg ervoor dat de actieve link in het menu ergens opvalt, door hiervoor stijlen toe te voegen in index.css.