Verkoperslys in Redux

In vorige lesse het ons met die hoofmateriaal klaargemaak. Nou, met behulp van thunk, verkry ons 'n lys van produkte van die bediener en kan ons 'n nuwe produk op die bediener stoor. Kom ons maak die verkopers reg. Ons kry immers data vir hulle ook. Kom ons maak 'n aparte bladsy met 'n lys van verkopers.

Maak ons toepassing met produkte oop, en daarin die gids sellers. Laat ons in hierdie gids die lêer SellersList.jsx skep. Hier sal ons useSelector, Link en selectAllSellers gebruik, wie se kode ons 'n bietjie later in sellersSlice.js sal skryf:

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

Laat ons dan die SellersList self skep. Daarin sal ons al die verkopers met behulp van die hok useSelector verkry, dan die uitleg vir die lys van verkopers in die lus map kry, terwyl elke verkoper se naam na sy eie bladsy sal lei. En aan die einde gee ons die uitleg met die opskrif en die verkrygde lys terug:

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>Verkopers:</h2>

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

Gaan dan na die lêer sellersSlice.js en skep, na analogie met die selektors in productsSlice.js, aan die einde van die lêer twee selektors na die uitvoer van die reduseerder:

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

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

Nou moet ons 'n roete vir die bladsy met die lys aandui, daarvoor, maak die lêer App.jsx oop en voeg by die skikking van kind-roetes children nog een voorwerp by (moenie vergeet om die komponent SellersList in te voer nie):

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

Om te maak dat ons skakel 'Sellers' in die spyskaart werk, kom ons gaan na die lêer root.jsx (hoe lank gelede was dit ... ) en vervang die etiket a met die element NavLink:

<NavLink to="/sellers" end>
	Verkopers
</NavLink>

En laastens. Sodat in ons spyskaart die aktiewe skakel uitgelig word, en dit duidelik is op watter bladsy ons is, voeg ons styl by in index.css:

nav a.active {
	color: purple;
}

Laat ons toepassing loop. Nou kan ons na die bladsy met verkopers gaan deur op 'Sellers' in die spyskaart te klik. Eerstens moet ons natuurlik op 'Products' in die spyskaart klik, anders sal ons produkte nie gelaai word nie. In die volgende les sal ons 'n bladsy vir elke verkoper maak en hiermee die studie van hierdie Redux-handboek afsluit.

Maak jou studentetoepassing oop. Deur die lesse se materiaal te bestudeer, skep in die gids teachers die lêer TeachersList.jsx. Met behulp van hierdie komponent sal jy 'n lys van onderwysers vertoon. Voer die nodige komponente en hokke daarin in.

Skryf die kode vir die komponent TeachersList, kry al die onderwysers daarin en maak 'n lys van onderwysers teachersToRender, laat in elke lyn van hierdie lys hul vanne en voorletters vertoon, en in hakies die vak wat hulle aanbied. Laat elke van en voorletters saam 'n skakel wees wat na 'n aparte bladsy vir elke onderwyser lei. Dan aan die einde van die komponent se kode gee die uitleg met die opskrif en die gemaakte lys terug.

Aan die einde van die lêer teachersSlice.js skep 'n paar funksies-selektor selectAllTeachers en selectTeacherById, soos in die les gewys.

In App.jsx koppel nog 'n kind- roete vir die bladsy met onderwysers in.

In die lêer root.jsx in die spyskaart vir 'Teachers' vervang die etiket a met NavLink, soos gewys in die les. Maak so dat die aktiewe skakel in die spyskaart op een of ander manier uitgelig word, deur vir dit style by te voeg in index.css.