Verkopersbladsy in Redux

Die werk is amper klaar. Kom ons doen die laaste ding in hierdie les - voeg 'n aparte bladsy vir elke verkoper by ons toepassing. Hier sal net reeds bekende aksies wees. Kom ons begin.

Maak ons toepassing met produkte oop, en daarin die gids sellers. Skep in hierdie gids die lêer SellerPage.jsx. Nou begin ons kode skryf vir ons komponent SellerPage:

export const SellerPage = () => {}

Kry eers die verkoper se id en vind daarmee die voorwerp van die nodige verkoper in die slice:

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

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

Verder onder in die kode vir SellerPage na die verkoper verkry, sal ons alle produkte kry, en dan slegs dié kies wat deur hierdie verkoper geplaas is:

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

En dan uit die name van die gekose produkte 'n lys vorm met behulp van map. Trouens, elke produknaam in hierdie lys sal 'n skakel wees na die bladsy van daardie produk:

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

En aan die einde van die kode vir SellerPage gee die opmaak terug: 'n opskrif met die verkoper se naam en 'n lys van produkte wat hierdie verkoper geplaas het:

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

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

Natuurlik het ons ook 'n roete nodig vir die verkoper se bladsy. Maak die lêer App.jsx oop en voeg dit laaste by die kindroetes:

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

Moenie vergeet om die nodige hooks en komponente in te voer in SellersPage.jsx en App.jsx nie.

Laat ons toepassing begin, laai produkte, en dan in die spyskaart links klik op die skakel 'Sellers'. Nou kan ons na enige verkoper se bladsy gaan deur op die verkoper se naam te klik, en dan op sy bladsy al sy produkte sien. En deur op enige van sy produkte te klik, gaan ons na die bladsy met daardie produk.

Dit is alles vir nou. Ons het die basiese beginsels van Redux bestudeer om 'n toepassing te skep en selfs 'n bietjie dieper. Ons het kennis gemaak met verskillende nuttige instrumente. Ek wens jou voorspoed met die skep van jou Redux-toepassings!

Maak jou studentetoepassing oop. Nadat jy die lesse se materiaal bestudeer het, skep in die gids teachers die lêer TeacherPage.jsx. In die kode van die komponent TeacherPage, verkry die voorwerp met die nodige onderwyser en alle studente van hierdie onderwyser. Gebruik map om 'n lys van hulle te skep, laat die volledige naam van elke student 'n skakel wees na die bladsy van daardie student.

Laat in die teruggekeerde opmaak 'n opskrif wees met die onderwyser se volledige naam, onder dit 'n kleiner opskrif - met die vak, wat hy onderrig, en nog laer 'n lys van sy studente.

In App.jsx, koppel nog 'n kind- roete vir die onderwyser se bladsy.

Begin jou toepassing en maak seker dat alles werk.