Selgerliste i Redux

I de foregående timene avsluttet vi hovedmaterialet. Nå henter vi en liste over produkter fra serveren ved hjelp av thunk, og vi kan lagre et nytt produkt på serveren. La oss håndtere selgere. Tross alt får vi data for dem også. La oss lage en egen side med en liste over selgere.

Åpne applikasjonen vår med produkter, og i den mappen sellers. Opprett filen SellersList.jsx i denne mappen. Her skal vi bruke useSelector, Link og selectAllSellers, hvis kode vi skal skrive i sellersSlice.js litt senere:

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

Deretter oppretter vi selve SellersList. I den skal vi hente alle selgere ved hjelp av hooken useSelector, deretter få HTML-strukturen for listen over selgere i en map-løkke, hvor hvert selgernavn skal lede til deres side. Og til slutt returnerer vi HTML-strukturen med en overskrift og den opprettede listen:

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

Deretter går vi inn i filen sellersSlice.js og analogt med selectorene i productsSlice.js oppretter vi på slutten av filen to selectorer etter eksport av reduceren:

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

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

Nå må vi konfigurere ruten for siden med listen, for dette åpner vi filen App.jsx og legger til et nytt objekt i arrayet med underruter children (ikke glem å importere komponenten SellersList):

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

For at lenken vår 'Sellers' i menyen skal fungere, la oss gå inn i filen root.jsx (så lenge siden dette var ... ) og erstatte taggen a med elementet NavLink:

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

Og siste. For at den aktive lenken i menyen vår skal markeres, og det skal være forståelig hvilken side vi er på, legger vi til en stil i index.css:

nav a.active {
	color: purple;
}

La oss starte applikasjonen vår. Nå kan vi gå til siden med selgere ved å klikke på 'Sellers' i menyen. Selvfølgelig, må du først klikke på 'Products' i menyen, ellers vil ikke produktene våre lastes inn. I neste leksjon lager vi en side for hver selger og avslutter med det denne opplæringen i Redux.

Åpne applikasjonen din med studenter. Etter å ha studert leksjonsmaterialet, i mappen teachers opprett filen TeachersList.jsx. Ved hjelp av denne komponenten skal du vise en liste over laerere. Importer de nødvendige komponentene og hookene i den.

Skriv koden for komponenten TeachersList, hent alle laerere i den og lag en liste over laerere teachersToRender, la hver linje i denne listen vise deres etternavn og initialer, og i parentes faget de underviser i. La hvert etternavn sammen være en lenke som fører til en egen side for hver laerer. Deretter returnerer du på slutten av komponentkoden HTML-strukturen med en overskrift og den opprettede listen.

På slutten av filen teachersSlice.js opprett et par selector-funksjoner selectAllTeachers og selectTeacherById, som vist i leksjonen.

I App.jsx koble til enda en underrute for siden med laerere.

I filen root.jsx i menyen for 'Teachers' erstatt taggen a med NavLink, som vist i leksjonen. Gjør slik at den aktive lenken i menyen markeres på en eller annen måte, ved å legge til stiler for dette i index.css.