Selgerside i Redux

Saken gjenstår liten. La oss på dette kurset gjøre den siste tingen - legge til en egen side for hver selger i applikasjonen vår. Her vil det bare være handlinger du allerede kjenner til. La oss komme i gang.

La oss åpne applikasjonen vår med produkter, og i den mappen sellers. La oss opprette en fil i denne mappen SellerPage.jsx. Nå skal vi begynne å skrive kode for SellerPage for vår komponent:

export const SellerPage = () => {}

Først, la oss hente id-en til selgeren og ved hjelp av den finne objektet til den nødvendige selgeren i slicen:

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

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

Deretter, lenger ned i koden for SellerPage etter å ha hentet selgeren, henter vi alle produktene, og deretter velger vi bare de som er lagt ut av denne selgeren:

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

Og deretter fra navnene på de valgte produktene danner vi en liste ved hjelp av map. Dessuten vil hvert produktnavn i denne listen være en lenke til siden for dette produktet:

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

Og på slutten av koden for SellerPage returnerer vi HTML-strukturen: en overskrift med selgerens navn og en liste over produkter som denne selgeren har lagt ut:

return (
	<div>
	<h2>Selger: {seller.name}</h2>

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

Selvfølgelig trenger vi også en rute for selgersiden. La oss åpne filen App.jsx og legge den til som den siste av bar rutene:

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

Ikke glem å importere nødvendige hooks og komponenter i SellersPage.jsx og App.jsx.

La oss starte applikasjonen vår, laste inn produkter, og deretter i menyen til venstre klikke på lenken 'Sellers'. Nå kan vi gå inn på siden til en hvilken som helst selger ved å klikke på navnet deres, og deretter på siden deres se alle produktene deres. Og ved å klikke på hvilken som helst av produktene deres, går vi inn på siden for det produktet.

Det er alt for nå. Vi har studert grunnleggende Redux for å lage en applikasjon og til og med litt dypere. Vi har blitt kjent med forskjellige nyttige verktøy. Jeg ønsker dere lykke til med å lage deres Redux-applikasjoner!

Åpne applikasjonen din med studenter. Etter å ha studert leksjonsmaterialet, i mappen teachers opprett en fil TeacherPage.jsx. I koden til komponenten TeacherPage, hent objektet med den nødvendige læreren og alle studentene til denne læreren. Ved hjelp av map, lag en liste av dem, la hele navnet til hver student være en lenke til siden til denne studenten.

La i den returnerte HTML-strukturen være en overskrift med lærerens fulle navn, under vil det være en mindre overskrift - med faget som han/hun underviser i, og enda lenger ned en liste over hans/hennes studenter.

I App.jsx, koble til enda en bar rute for siden med læreren.

Start applikasjonen din og sørg for at alt fungerer.