Müüja leht Reduxis

Jäänud on vähe asi. Teeme sellel tunni viimase asja - lisame meie rakendusele eraldi lehekülje iga müüja jaoks. Siin on ainult juba tutvud tegevused. Asume asja kallale.

Avame oma tooterakenduse, ja selles kausta sellers. Loome selles kaustas faili SellerPage.jsx. Nüüd alustame koodi kirjutamist SellerPage jaoks meie komponendis:

export const SellerPage = () => {}

Alustuseks saame müüja id ja selle järgi leiame sobiva müüja objekti slice'ist:

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

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

Järgmisena allpool koodis SellerPage järel pärast müüja saamist saame kõik tooted, seejärel valime neist välja need, mis on lisatud antud müüja poolt:

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

Ja järgmisena valitud toodete nimedest moodustame loendi kasutades map. Lisaks iga toote nimi selles loendis on link selle toote lehele:

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

Ja lõpus koodis SellerPage jaoks tagastame välimuse: pealkirja müüja nimega ja toodete loendi, mille selle müüja on lisanud:

return (
	<div>
	<h2>Müüja: {seller.name}</h2>

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

Loomulikult vajame me veel marsruuti müüja lehe jaoks. Avame faili App.jsx ja lisame selle viimasena alam-marsruutide hulka:

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

Ärge unustage importida vajalikke huke ja komponente failidesse SellersPage.jsx ja App.jsx.

Käivitame oma rakenduse, laadime tooted sisse, seejärel vasakpoolses menüüs klõpsame lingil 'Sellers'. Nüüd saame minna suvalise müüja lehele, klõpsates tema nime peale, ja seejärel tema lehel näha kõiki tema tooteid. Ja, klõpsates suvalise tema toote peal, läheme selle toote lehele.

Siinkohal on kõik. Oleme õppinud Reduxi põhitõdesid rakenduse loomiseks ja isegi natuke sügavamalt. Tutvunud erinevate kasulike tööriistadega. Soovin teile edu teie Redux-rakenduste loomisel!

Avage oma õpilaste rakendus. Olles õppetunni materjale läbi uurinud, kaustas teachers looge fail TeacherPage.jsx. Komponendi TeacherPage koodis saage objekt vajaliku õpetajaga ja kõik selle õpetaja õpilased. Kasutades map looge nendest loend, olgu iga õpilase täisnimi link selle õpilase lehele.

Olgu tagastatavas välimuses pealkiri õpetaja täisnimega, allpool on väiksem pealkiri - ainega, mida ta õpetab, ja veel allpool tema õpilaste loend.

App.jsx failis ühendage veel üks alam- marsruut õpetaja lehe jaoks.

Käivitage oma rakendus ja veenduge, et kõik töötab.