Pardavėjo puslapis Redux

Liko nedaug. Šioje pamokoje padarysime paskutinį dalyką - pridėsime prie mūsų aplikacijos atskirą puslapį kiekvienam pardavėjui. Čia bus tik jums jau pažįstami veiksmai. Pradėkime.

Atidarykime mūsų produktų aplikaciją, o joje aplanką sellers. Sukurkime šiame aplanke failą SellerPage.jsx. Dabar pradėkime rašyti kodą SellerPage mūsų komponentui:

export const SellerPage = () => {}

Pirmiausia gausime pardavėjo id ir pagal jį rasime reikiamo pardavėjo objektą slice'e:

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

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

Toliau žemiau kode SellerPage po pardavėjo gavimo mes gausime visus produktus, o tada iš jų išrinksime tik tuos, kuriuos išklodė šis pardavėjas:

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

O toliau iš pasirinktų produktų pavadinimų suformuosime sąrašą naudodami map. Be to, kiekvienas produkto pavadinimas šiame sąraše bus nuoroda į šio produkto puslapį:

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

Ir pabaigoje kodo SellerPage grąžinsime žymėjimą: antraštę su pardavėjo pavadinimu ir produktų sąrašą, kuriuos išklodė šis pardavėjas:

return (
	<div>
	<h2>Pardavėjas: {seller.name}</h2>

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

Žinoma, mums dar reikia maršruto pardavėjo puslapiui. Atidarykime failą App.jsx ir pridėkime jį paskutinį prie vaikinių maršrutų:

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

Nepamirškite importuoti reikiamų hukų ir komponentų į SellersPage.jsx ir App.jsx.

Paleiskime mūsų aplikaciją, užkraukime produktus, o tada kairėje esančiame meniu spustelėkime nuorodą 'Pardavėjai'. Dabar mes galime užeiti į bet kurio pardavėjo puslapį, spustelėję jo pavadinimą, o tada jo puslapyje pamatyti visus jo produktus. O, spustelėję bet kurį iš jo produktų, užeisime į šio produkto puslapį.

Kol kas tai viskas. Mes išstudijavome Redux pagrindus aplikacijų kūrimui ir net šiek tiek giliau. Susipažinome su įvairiais naudingais įrankiais. Linkiu jums sėkmės kuriant jūsų Redux-aplikacijas!

Atidarykite savo studentų aplikaciją. Išstudijavę pamokos medžiagą, aplanke teachers sukurkite failą TeacherPage.jsx. Kode komponento TeacherPage gaukite objektą su reikiamu dėstytoju ir visus šio dėstytojo studentus. Naudodami map sukurkite iš jų sąrašą, tegul kiekvieno studento Vardas Pavardė bus nuoroda į šio studento puslapį.

Tegul grąžinamame žymėjime bus antraštė su dėstytojo Vardu Pavarde, žemiau bus mažesnė antraštė - su dalyku, kurį jis dėsto, o dar žemiau jo studentų sąrašas.

App.jsx prijunkite dar vieną vaikinį maršrutą dėstytojo puslapiui.

Paleiskite savo aplikaciją ir įsitikinkite, kad viskas veikia.