Myyjien lista Reduxissa

Edellisillä tunneilla lopetimme pääasiallisen aineiston. Nyt thunkin avulla haemme tuotelistan palvelimelta ja voimme tallentaa uuden tuotteen palvelimelle. Selvitetään myyjät. Loppujen lopuksi saamme dataa myös heille. Tehdään erillinen sivu myyjien listalle.

Avataan tuotesovelluksemme, ja sen sisällä kansio sellers. Luodaan tähän kansioon tiedosto SellersList.jsx. Täällä aiomme käyttää useSelector, Link ja selectAllSellers, jonka koodin me kirjoitamme tiedostoon sellersSlice.js hieman myöhemmin:

import { useSelector } from 'react-redux'
import { Link } from 'react-router-dom'
import { selectAllSellers } from './sellersSlice'

Seuraavaksi luomme itse SellersList:n. Siinä me saamme kaikki myyjät hookin useSelector avulla, sitten saamme listauksen myyjien listalle silmukassa map, jossa jokaisen myyjän nimi on linkki hänen sivulleen. Ja lopuksi palautamme listauksen otsikon ja saadun listan:

export const SellersList = () => {
	const sellers = useSelector(selectAllSellers)
	const sellersToRender = sellers.map((seller) => (
		<li key={seller.id}>
			<Link to={`/sellers/${seller.id}`}>{seller.name}</Link>
		</li>
	))

	return (
		<div>
			<h2>Myyjät:</h2>

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

Seuraavaksi mennään tiedostoon sellersSlice.js ja vastaavasti kuin selektoreissa tiedostossa productsSlice.js luomme aivan tiedoston loppuun kaksi selektoria reducerin viennin jälkeen:

export const selectAllSellers = (state) => state.sellers

export const selectSellerById = (state, sellerId) =>
state.sellers.find((seller) => seller.id === sellerId)

Nyt meidän on määritettävä reitti listasivulle, avaa tiedosto App.jsx ja lisää lasten reittien taulukkoon children vielä yhden objektin (älä unohda tuoda komponenttia SellersList):

{
	path: '/sellers',
	element: <SellersList />,
},

Jotta linkkimme 'Myyjät' valikkoon toimisi, menkäämme tiedostoon root.jsx (miten kauan siitä on ... ) ja korvaa tagi a elementillä NavLink:

<NavLink to="/sellers" end>
	Myyjät
</NavLink>

Ja viimeisenä. Jotta valikossamme korostuisi aktiivinen linkki, ja olisi selvällä millä sivulla olemme, lisäämme tyylin tiedostoon index.css:

nav a.active {
	color: purple;
}

Käynnistetään sovelluksemme. Nyt voimme mennä myyjien sivulle napsauttamalla 'Myyjät' valikossa. Ennen tätä tietysti täytyy napsauttaa 'Tuotteet' valikossa, muuten tuotteemme eivät lataudu. Seuraavalla tunnilla teemme sivun jokaiselle myyjälle ja päätämme tämän Redux-opetusohjelman oppimisen.

Avaa opiskelijasovelluksesi. Opiskeltuasi tunnin materiaalin, luo kansioon teachers tiedosto TeachersList.jsx. Tämän komponentin avulla näytät listan opettajista. Tuo siihen tarvittavat komponentit ja hookit.

Kirjoita koodi komponentille TeachersList, hanki siihen kaikki opettajat ja tee opettajien lista teachersToRender, anna jokaiselle tämän listan riville näkyviin heidän sukunimensä ja nimikirjaimet, ja suluissa aine, jota he opettavat. Anna jokaisen nimen ja nimikirjainten yhdistelmän olla linkki, joka johtaa kunkin opettajan erilliselle sivulle. Sen jälkeen komponentin koodin lopussa palauta listaus otsikon ja luodun listan kanssa.

Tiedoston teachersSlice.js loppuun luo pari funktio-selektoria selectAllTeachers ja selectTeacherById, kuten oppitunnilla näytetään.

App.jsx:ssä liitä vielä yksi lapsireitti opettajien sivulle.

Tiedostossa root.jsx valikossa 'Opettajat' korvaa tagi a NavLink:llä, kuten oppitunnilla näytetään. Tee niin, että aktiivinen linkki valikossa korostuu jotenkin, lisäämällä tätä varten tyylejä tiedostoon index.css.