Försäljarlista i Redux

På de senaste lektionerna avslutade vi med det huvudsakliga materialet. Nu med hjälp av thunk hämtar vi en lista över produkter från servern och kan spara en ny produkt på servern. Låt oss ta reda på med försäljarna. Vi får trots allt data för dem också. Låt oss skapa en separat sida med en lista över försäljare.

Låt oss öppna vår produktapplikation, och i den mappen sellers. Låt oss skapa i denna mapp filen SellersList.jsx. Här kommer vi att använda useSelector, Link och selectAllSellers, vars kod vi kommer att skriva i sellersSlice.js lite senare:

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

Därefter skapar vi själva SellersList. I den kommer vi att få alla försäljare med hjälp av hooken useSelector, sedan få HTML-strukturen för listan av försäljare i en map-loop, där varje försäljarens namn kommer att leda till deras sida. Och till slut returnera HTML-strukturen med en rubrik och den erhållna listan:

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>Försäljare:</h2>

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

Sedan går vi in i filen sellersSlice.js och i enlighet med selektorerna i productsSlice.js skapar vi i slutet av filen två selektorer efter exporten av reducern:

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

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

Nu måste vi ange en route för sidan med listan, för att göra detta öppnar vi filen App.jsx och i arrayen med barnrutter children lägger vi till ytterligare ett objekt (glöm inte att importera komponenten SellersList):

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

För att vår länk 'Sellers' i menyn ska fungera, låt oss gå in i filen root.jsx (hur länge sedan var det ... ) och byta ut taggen a mot elementet NavLink:

<NavLink to="/sellers" end>
	Försäljare
</NavLink>

Och sist. För att i vår meny ska den aktiva länken markeras, och det ska vara tydligt på vilken sida vi befinner oss, lägger vi till en stil i index.css:

nav a.active {
	color: purple;
}

Låt oss starta vår applikation. Nu kan vi gå till sidan med försäljare genom att klicka på 'Försäljare' i menyn. Naturligtvis måste vi först klicka på 'Products' i menyn, annars kommer våra produkter inte att laddas. I nästa lektion ska vi göra en sida för varje försäljare och avsluta inlärningen av denna handledning i Redux.

Öppna din applikation med studenter. Efter att ha studerat lektionens material, skapa i mappen teachers filen TeachersList.jsx. Med hjälp av denna komponent kommer du att visa en lista över lärare. Importera till den nödvändiga komponenter och hooks.

Skriv koden för komponenten TeachersList, hämta alla lärare i den och skapa en lista över lärare teachersToRender, låt varje rad i denna lista visa deras efternamn och initialer, och inom parentes ämnet som de undervisar i. Låt varje hela namn var en länk som leder till en separat sida för varje lärare. Sedan i slutet av komponentkoden, returnera HTML-strukturen med en rubrik och den skapade listan.

I slutet av filen teachersSlice.js, skapa ett par funktionsselektorer selectAllTeachers och selectTeacherById, som visas i lektionen.

I App.jsx, anslut ytterligare en barn- route för sidan med lärare.

I filen root.jsx, i menyn för 'Teachers', byt ut taggen a mot NavLink, som visas i lektionen. Se till att den aktiva länken i menyn markeras på något sätt genom att lägga till stilar för detta i index.css.