Myyjän sivu Reduxissa

Vain vähän on tekemistä jäljellä. Tehdäänpä tällä tunnista viimeinen asia - lisätään sovellukseemme erillinen sivu jokaiselle myyjälle. Tässä on vain sinulle jo tuttuja toimintoja. Aloitetaan.

Avataan sovelluksemme tuotteiden kanssa, ja siinä kansio sellers. Luodaan tähän kansioon tiedosto SellerPage.jsx. Nyt aloitamme kirjoittamaan koodia SellerPage komponentillemme:

export const SellerPage = () => {}

Ensin haetaan myyjän id ja sen perusteella etsitään tarvittavan myyjän objekti slicestä:

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

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

Seuraavaksi alempana SellerPage koodissa myyjän saamisen jälkeen saamme kaikki tuotteet, ja sitten valitsemme niistä vain ne, jotka on listannut kyseinen myyjä:

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

Ja sitten valittujen tuotteiden nimistä muodostamme listan käyttämällä map. Lisäksi jokainen tuotteen nimi tässä listassa on linkki kyseisen tuotteen sivulle:

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

Ja lopussa SellerPage koodille palautamme HTML-rakenne: otsikko myyjän nimellä ja lista tuotteista, jotka tämä myyjä on listannut:

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

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

Tietysti tarvitsemme myös reitin myyjän sivulle. Avataan tiedosto App.jsx ja lisätään se viimeiseksi lasten reitteihin:

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

Älä unohda tuoda tarvittavat hookit ja komponentit tiedostoihin SellersPage.jsx ja App.jsx.

Käynnistetään sovelluksemme, ladataan tuotteet, ja sitten vasemmalla olevasta valikosta klikataan linkkiä 'Sellers'. Nyt voimme mennä minkä tahansa myyjän sivulle klikkaamalla hänen nimeään, ja sitten hänen sivullaan nähdä kaikki hänen tuotteensa. Ja klikkaamalla mitä tahansa hänen tuotteistaan, pääsemme kyseisen tuotteen sivulle.

Siinä kaikki toistaiseksi. Olemme oppineet Reduxin perusteet sovelluksen luomiseen ja jopa hieman syvenmälle. Tutustuimme erilaisiin hyödyllisiin työkaluihin. Toivon teille onnea luodessanne Redux-sovelluksianne!

Avaa opiskelijasovelluksesi. Opiskeltuasi tunnin materiaalin, luo kansioon teachers tiedosto TeacherPage.jsx. Komponentin TeacherPage koodissa hae objekti tarvittavasta opettajasta ja kaikki kyseisen opettajan opiskelijat. Käytä map luodaksesi niistä listan, olkoon jokaisen opiskelijan koko nimi linkkinä kyseisen opiskelijan sivulle.

Palautetussa HTML-rakenteessasi olkoon otsikko opettajan koko nimellä, alempi hieman pienempi otsikko - opettajan oppiaineella, jota hän opettaa, ja vielä alempana lista hänen opiskelijoistaan.

App.jsx tiedostossa liitä vielä yksi lapsi- reitti opettajan sivulle.

Käynnistä sovelluksesi ja varmista, että kaikki toimii.