Säljarsida i Redux

Det mesta är redan klart. Låt oss på denna lektion göra den sista saken - lägga till en separat sida för varje säljare i vår applikation. Här kommer bara redan bekanta åtgärder. Låt oss komma igång.

Öppna vår produktapplikation, och i den mappen sellers. Låt oss skapa en fil SellerPage.jsx i denna mapp. Nu ska vi börja skriva koden för SellerPage för vår komponent:

export const SellerPage = () => {}

Låt oss först få säljarens id och genom den hitta objektet för den önskade säljaren i slicen:

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

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

Sedan, längre ner i koden för SellerPage efter att ha hämtat säljaren, kommer vi att hämta alla produkter, och sedan välja ut endast de som är listade av denna säljare:

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

Och sedan från namnen på de valda produkterna skapa vi en lista med hjälp av map. Dessutom kommer varje produktnamn i denna lista att vara en länk till produktens sida:

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

Och i slutet av koden för SellerPage returnerar vi HTML: en rubrik med säljarens namn och en lista över produkter som denna säljare har lagt ut:

return (
	<div>
	<h2>Säljare: {seller.name}</h2>

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

Naturligtvis behöver vi också en route för säljarsidan. Öppna filen App.jsx och lägg till den sist till barnrutter:

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

Glöm inte att importera nödvändiga hooks och komponenter till SellersPage.jsx och App.jsx.

Låt oss starta vår applikation, ladda produkterna, och sedan i menyn till vänster klicka på länken 'Sellers'. Nu kan vi gå in på valfri säljares sida genom att klicka på deras namn, och sedan på deras sida se alla deras produkter. Och genom att klicka på vilken som helst av deras produkter kommer vi in på sidan för den produkten.

Det är allt för nu. Vi har lärt oss grunderna i Redux för att skapa en applikation och till och med lite mer djuplodande. Vi har bekantat oss med olika användbara verktyg. Jag önskar er lycka till med att skapa era Redux-applikationer!

Öppna din studentapplikation. Efter att ha studerat lektionsmaterialet, skapa en fil TeacherPage.jsx i mappen teachers. I koden för komponenten TeacherPage, hämta objektet för den önskade läraren och alla denna lärares studenter. Skapa med hjälp av map en lista av dem, låt varje students hela namn vara en länk till den studentens sida.

Låt i den returnerade HTML-koden finnas en rubrik med lärarens hela namn, under det en mindre rubrik - med ämnet som de undervisar i, och ännu längre ner en lista över deras studenter.

I App.jsx, anslut ytterligare en barn- route för lärarens sida.

Starta din applikation och se till att allt fungerar.