Sælgerside i Redux

Der er kun en lille ting tilbage. Lad os på denne lektion gøre den sidste ting - tilføje en separat side for hver sælger til vores applikation. Her vil der kun være allerede kendte handlinger. Lad os komme i gang.

Lad os åbne vores produktapplikation, og i den mappen sellers. Lad os oprette en fil SellerPage.jsx i denne mappe. Nu vil vi begynde at skrive kode for SellerPage til vores komponent:

export const SellerPage = () => {}

Lad os først hente sælgerens id og finde sælgerobjektet i slicen vha. dette id:

export const SellerPage = () => {
	let params = useParams()
	const { sellerId } = params

	const seller = useSelector((state) => selectSellerById(state, sellerId))
}

Dernæst, længere nede i koden for SellerPage efter at have hentet sælgeren, henter vi alle produkter og vælger derefter kun dem, der er lagt ud af denne sælger:

const productsOfSeller = useSelector((state) => {
	const allProducts = selectAllProducts(state)
	return allProducts.filter((product) => product.seller === sellerId)
})

Og derefter laver vi en liste fra navnene på de valgte produkter ved hjælp af map. Desuden vil hvert produktnavn på denne liste være et link til produktets side:

const productNames = productsOfSeller.map((product) => (
	<li key={product.id}>
		<Link to={`/products/${product.id}`}>{product.name}</Link>
	</li>
))

Og til sidst i koden for SellerPage returnerer vi opbygningen: en overskrift med sælgerens navn og en liste over produkter, som denne sælger har lagt ud:

return (
	<div>
	<h2>Sælger: {seller.name}</h2>

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

Selvfølgelig har vi også brug for en rute til sælgersiden. Lad os åbne filen App.jsx og tilføje den som den sidste til underruterne:

{
	path: '/sellers/:sellerId',
	element: <SellerPage />,
},

Glem ikke at importere de nødvendige hooks og komponenter til SellersPage.jsx og App.jsx.

Lad os starte vores applikation, loade produkter, og derefter i menuen til venstre klikke på linket 'Sellers'. Nu kan vi gå ind på enhver sælgers side ved at klikke på deres navn, og derefter på deres side se alle deres produkter. Og ved at klikke på ethvert af deres produkter, går vi ind på siden for dette produkt.

Det er alt for nu. Vi har studeret grundlæggende Redux for at oprette en applikation og endda lidt dybdegående. Vi har stiftet bekendtskab med forskellige nyttige værktøjer. Jeg ønsker dig held og lykke med at oprette dine Redux-applikationer!

Åbn din applikation med studerende. Efter at have studeret lektionens materiale, skal du i mappen teachers oprette filen TeacherPage.jsx. I koden for komponenten TeacherPage skal du hente objektet med den ønskede lærer og alle denne lærers studerende. Ved hjælp af map skal du oprette en liste ud af dem, lad hver studerendes fulde navn være et link til denne studerendes side.

Lad den returnerede opbygning indeholde en overskrift med lærerens fulde navn, derunder en mindre overskrift - med faget, som han/hun underviser i, og endnu længere nede en liste over hans/hendes studerende.

I App.jsx skal du tilslutte endnu en underrute til siden med læreren.

Start din applikation og sikr dig, at alt fungerer.