Sælgerliste i Redux

På de foregående lektioner afsluttede vi det grundlæggende materiale. Nu henter vi med hjælp af thunk en liste over produkter fra serveren og kan gemme et nyt produkt på serveren. Lad os tage hul på sælgerne. Vi henter jo også data til dem. Lad os lave en separat side med en liste over sælgere.

Åbn vores produktapplikation, og i den mappen sellers. Opret i denne mappe filen SellersList.jsx. Her vil vi bruge useSelector, Link og selectAllSellers, hvis kode vi skriver i sellersSlice.js lidt senere:

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

Dernæst opretter vi selve SellersList. I den henter vi alle sælgere ved hjælp af hook'et useSelector, derefter får vi HTML-strukturen for listen af sælgere i et map-loop, hvor hvert sælgernavn vil føre til deres side. Og til sidst returnerer vi HTML-strukturen med en overskrift og den oprettede liste:

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>Sælgere:</h2>

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

Dernæst går vi ind i filen sellersSlice.js og efter analogi med selektorerne i productsSlice.js opretter vi i slutningen af filen to selektorer efter eksporten af reduceren:

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

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

Nu er vi nødt til at tilføje ruten for siden med listen, for at gøre dette åbner vi filen App.jsx og tilføjer endnu et objekt til arrayet med underruter children (glem ikke at importere komponenten SellersList):

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

For at vores link 'Sellers' i menuen skal virke, lad os gå ind i filen root.jsx (hvornår var det det sidst... ) og erstatte tagget a med elementet NavLink:

<NavLink to="/sellers" end>
	Sælgere
</NavLink>

Og endelig. For at den aktive link i vores menu skal fremhæves, og det skal være forståeligt, hvilken side vi er på, tilføjer vi en stil i index.css:

nav a.active {
	color: purple;
}

Lad os starte vores applikation. Nu kan vi gå til siden med sælgere ved at klikke på 'Sælgere' i menuen. Selvfølgelig skal vi først klikke på 'Produkter' i menuen, ellers bliver vores produkter ikke hentet. I næste lektion laver vi en side for hver sælger og afslutter dermed dette studieafsnit om Redux.

Åbn din applikation med studerende. Efter at have studeret materialet fra lektionen, i mappen teachers opret filen TeachersList.jsx. Ved hjælp af denne komponent vil du vise listen over undervisere. Importer de nødvendige komponenter og hooks i den.

Skriv koden for komponentet TeachersList, hent alle underviserne i den og lav en liste over undervisere teachersToRender, lad hver linje i denne liste vise deres efternavne og initialer, og i parentes det fag, som de underviser i. Lad hvert fulde navn være et link, der fører til en separat side for hver underviser. Derefter returneres til sidst i komponentkoden HTML-strukturen med en overskrift og den oprettede liste.

I slutningen af filen teachersSlice.js opret et par funktionsselektorer selectAllTeachers og selectTeacherById, som vist i lektionen.

I App.jsx tilslut endnu en underrute for siden med underviserne.

I filen root.jsx i menuen for 'Teachers' erstat tagget a med NavLink, som vist i lektionen. Sørg for, at det aktive link i menuen fremhæves på en eller anden måde, ved at tilføje stile for dette i index.css.