Müüjate loend Reduxis

Eelmistel tundidel lõpetasime põhiteemaga. Nüüd saame thunki abil serverist toodete nimekirja ja saame salvestada serverisse uue toote. Tegeleme nüüd müüjatega. Me saame ju ka nende kohta andmeid. Teeme eraldi lehekülje müüjate nimekirjaga.

Avame oma tooterakenduse ja selles kausta sellers. Loome selles kaustas faili SellersList.jsx. Siin kasutame useSelector, Link ja selectAllSellers, mille koodi me kirjutame failis sellersSlice.js veidi hiljem:

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

Seejärel loome SellersList komponendi. Selles saame kõik müüjad hooki useSelector abil, seejärel saame müüjate loendi jaoks märgenduse tsüklis map, kusjuures iga müüja nimi viib tema leheküljele. Ja lõpus tagastame märgenduse koos pealkirja ja saadud loendiga:

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>Müüjad:</h2>

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

Seejärel läheme faili sellersSlice.js ja analoogia põhjal selektoritega failis productsSlice.js loome faili lõpus redutseri eksportimise järel kaks selektorit:

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

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

Nüüd peame määrama marsruudi loendi lehekülje jaoks, selleks avame faili App.jsx ja alam-marsruutide massiivi children lisame veel ühe objekti (ärge unustage importida komponenti SellersList):

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

Et meie link 'Müüjad' menüüs hakkaks tööle, lähme faili root.jsx (kui kaua see on olnud ... ) ja asendame sildi a elemendiga NavLink:

<NavLink to="/sellers" end>
	Müüjad
</NavLink>

Ja viimane. Et meie menüüs aktiivne link esile tõusta ja oleks arusaadav, millisel lehel me oleme, lisame stiili faili index.css:

nav a.active {
	color: purple;
}

Käivitame oma rakenduse. Nüüd saame minna müüjate lehele, klõpsates 'Müüjad' menüüs. Loomulikult tuleb enne klõpsata menüüs 'Tooted', muidu meie tooted ei lae. Järgmisel tunni teeme iga müüja jaoks lehekülje ja sellega lõpetame õpiku õppimise Reduxi kohta.

Avage oma õpilaste rakendus. Pärast tunni materjalide läbimist looge kaustas teachers fail TeachersList.jsx. Selle komponendi abil kuvate õpetajate loendi. Importige sellesse vajalikud komponendid ja hookid.

Kirjutage kood komponendile TeachersList, hankige selles kõik õpetajad ja tehke õpetajate loend teachersToRender, laske selles loendis igal real kuvada nende perekonnanimed ja initsiaalid ning sulgudes aine, mida nad õpetavad. Laske iga nimi koos olema lingiga, mis viib iga õpetaja eraldi lehele. Seejärel komponendi koodi lõpus tagastage märgendus pealkirja ja loodud loendiga.

Faili teachersSlice.js lõpus looge paar selektorifunktsiooni selectAllTeachers ja selectTeacherById, nagu on näidatud tunnis.

App.jsx-s ühendage veel üks alam- marsruut õpetajate lehekülje jaoks.

Failis root.jsx menüüs asendage 'Õpetajad' jaoks silt a NavLink-ga, nagu on näidatud tunnis. Tehke nii, et aktiivne link menüüs tõuseks esile, lisades selle jaoks stiilid faili index.css.