Pārdevēju saraksts Redux

Iepriekšējās nodarbībās mēs pabeidzām ar galveno materiālu. Tagad, izmantojot thunk, mēs iegūstam produktu sarakstu no servera un varam saglabāt jaunu produktu serverī. Tiksim galā ar pārdevējiem. Galu galā mēs iegūstam datus arī priekš viņiem. Izveidosim atsevišķu lapu ar pārdevēju sarakstu.

Atvērsim mūsu lietotni ar produktiem, un tajā mapi sellers. Izveidosim šajā mapē failu SellersList.jsx. Šeit mēs izmantosim useSelector, Link un selectAllSellers, kura kodu mēs uzrakstīsim sellersSlice.js nedaudz vēlāk:

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

Tālāk izveidosim pašu SellersList. Tajā mēs iegūsim visus pārdevējus, izmantojot hook useSelector, tad iegūsim atzīmējumu sarakstam pārdevēju cilpā map, turklāt katra pārdevēja nosaukums būs saite, kas ved uz viņa lapu. Un beigās atgriezīsim atzīmējumu ar virsrakstu un iegūto sarakstu:

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>Pārdevēji:</h2>

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

Tad dosimies uz failu sellersSlice.js un pēc analoģijas ar selektoriem productsSlice.js izveidosim pašās faila beigās divus selektorus pēc reducera eksporta:

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

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

Tagad mums ir jāpievieno maršruts saraksta lapai, šim nolūkam atvērsim failu App.jsx un bērnu maršrutu masīvā children pievienosim vēl vienu objektu (neaizmirstiet importēt komponentu SellersList):

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

Lai mūsu saite 'Pārdevēji' izvēlnē sāktu darboties, iesim uz failu root.jsx (cik sen tas bija ... ) un aizstāsim tagu a ar elementu NavLink:

<NavLink to="/sellers" end>
	Pārdevēji
</NavLink>

Un pēdējais. Lai mūsu izvēlnē izceltos aktīvā saite, un būtu saprotams, uz kuras lapas mēs atrodamies, mēs pievienosim stilu index.css:

nav a.active {
	color: purple;
}

Palaidīsim mūsu lietotni. Tagad mēs varam doties uz lapu ar pārdevējiem, noklikšķinot uz 'Pārdevēji' izvēlnē. Vispirms, protams, ir jānoklikšķina uz 'Produkti' izvēlnē, pretējā gadījumā mūsu produkti netiks ielādēti. Nākamajā nodarbībā mēs izveidosim lapu katram pārdevējam un ar to pabeigsim šī mācību grāmatas par Redux apguvi.

Atveriet savu lietotni ar studentiem. Izpētījuši nodarbības materiālus, mapē teachers izveidojiet failu TeachersList.jsx. Ar šī komponenta palīdzību jūs parādīsiet pasniedzēju sarakstu. Importējiet tajā nepieciešamos komponentus un hook.

Uzrakstiet kodu komponentam TeachersList, iegūstiet tajā visus pasniedzējus un izveidojiet pasniedzēju sarakstu teachersToRender, lai katrā šī saraksta rindā tiktu parādīti viņu uzvārdi un iniciāļi, bet iekavās priekšmets, ko viņi māca. Lai katrs uzvārds un iniciāļi kopā būtu saite, kas ved uz atsevišķu lapu katram pasniedzējam. Tad komponenta koda beigās atgrieziet atzīmējumu ar virsrakstu un izveidoto sarakstu.

Faila teachersSlice.js beigās izveidojiet funkciju pāri selektorus selectAllTeachers un selectTeacherById, kā parādīts nodarbībā.

App.jsx pievienojiet vēl vienu bērnu maršrutu lapai ar pasniedzējiem.

Failā root.jsx izvēlnē priekš 'Pasniedzēji' aizstājiet tagu a ar NavLink, kā parādīts nodarbībā. Iestatiet, lai aktīvā saite izvēlnē kaut kā izceltos, pievienojot tam stilus index.css.