Pārdevēja lapa Redux

Atliek tikai mazliet. Šajā nodarbībā izveidosim pēdējo lietu - pievienosim mūsu lietotnei atsevišķu lapu katram pārdevējam. Šeit būs tikai jums jau pazīstamas darbības. Sāksim.

Atvērsim mūsu lietotni ar produktiem, un tajā mapi sellers. Izveidosim šajā mapē failu SellerPage.jsx. Tagad sāksim rakstīt kodu SellerPage mūsu komponentam:

export const SellerPage = () => {}

Sākumā iegūsim pārdevēja id un pēc tā atradīsim vajadzīgā pārdevēja objektu slaisī:

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

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

Tālāk zemāk kodā SellerPage pēc pārdevēja iegūšanas mēs iegūsim visus produktus, un tad izvēlēsimies no tiem tikai tos, kurus ir ievietojis šis pārdevējs:

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

Un tad no izvēlēto produktu nosaukumiem izveidosim sarakstu, izmantojot map. Turklāt katrs produkta nosaukums šajā sarakstā būs saite uz šī produkta lapu:

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

Un beigās kodā SellerPage atgriezīsim izskatu: virsrakstu ar pārdevēja nosaukumu un produktu sarakstu, kurus šis pārdevējs ir ievietojis:

return (
	<div>
	<h2>Pārdevējs: {seller.name}</h2>

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

Protams, mums vēl ir vajadzīgs maršruts pārdevēja lapai. Atvērsim failu App.jsx un pievienosim to pēdējo pie bērnu maršrutiem:

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

Neaizmirstiet importēt nepieciešamos hookus un komponentus SellersPage.jsx un App.jsx.

Palaidīsim mūsu lietotni, ielādēsim produktus, un tad izvēlnē pa kreisi noklikšķināsim uz saites 'Sellers'. Tagad mēs varam iet uz jebkura pārdevēja lapu, noklikšķinot uz tā nosaukuma, un tad viņa lapā redzēt visus viņa produktus. Un, noklikšķinot uz jebkura no viņa produktiem, iesim uz šī produkta lapu.

Pagaidām tas ir viss. Mēs apguvām Redux pamatus lietotnes izveidošanai un pat nedaudz dziļāk. Iepazināmies ar dažādiem noderīgiem rīkiem. Novēlu jums veiksmi jūsu Redux lietotņu izveidē!

Atveriet savu lietotni ar studentiem. Izpētījis nodarbības materiālus, mapē teachers izveidojiet failu TeacherPage.jsx. Kodā komponenta TeacherPage iegūstiet objektu ar vajadzīgo skolotāju un visus šī skolotāja studentus. Izmantojot map, izveidojiet no tiem sarakstu, kura katra studenta pilnais vārds būs saite uz šī studenta lapu.

Lai atgrieztajā izskatā būtu virsraksts ar skolotāja pilno vārdu, zemāk būs mazāks virsraksts - ar mācību priekšmetu, ko viņš māca, un vēl zemāk saraksts ar viņa studentiem.

App.jsx pievienojiet vēl vienu bērnu maršrutu skolotāja lapai.

Palaidiet savu lietotni un pārliecinieties, ka viss darbojas.