Pagina vânzătorului în Redux

Mai avem puțin de făcut. Să facem în această lecție ultimul lucru - să adăugăm în aplicația noastră o pagină separată pentru fiecare vânzător. Aici vor fi doar acțiuni deja familiare pentru tine. Să începem.

Deschidem aplicația noastră cu produse, iar în ea folderul sellers. Să creăm în acest folder fișierul SellerPage.jsx. Acum să începem scrierea codului SellerPage pentru componentul nostru:

export const SellerPage = () => {}

Pentru început obținem id-ul vânzătorului și prin el găsim obiectul vânzătorului necesar în slice:

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

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

Apoi mai jos în cod pentru SellerPage după obținerea vânzătorului vom obține toate produsele, apoi vom alege din ele doar pe cele care sunt postate de acest vânzător:

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

Și apoi din numele produselor selectate vom forma o listă folosind map. În plus fiecare nume de produs din această listă va fi un link către pagina acestui produs:

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

Și la sfârșitul codului pentru SellerPage returnăm markup-ul: un titlu cu numele vânzătorului și o listă de produse pe care le-a postat acest vânzător:

return (
	<div>
	<h2>Vânzător: {seller.name}</h2>

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

Desigur, avem nevoie și de o rută pentru pagina vânzătorului. Deschidem fișierul App.jsx și o adăugăm ultima printre rutele copil:

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

Nu uitați să importați hook-urile și componentele necesare în SellersPage.jsx și App.jsx.

Pornim aplicația noastră, încărcăm produsele, apoi în meniul din stânga facem clic pe linkul 'Sellers'. Acum putem intra pe pagina oricărui vânzător, făcând clic pe numele său, iar apoi pe pagina lui să vedem toate produsele sale. Și, făcând clic pe oricare dintre produsele sale, vom intra pe pagina cu acel produs.

Pe moment, asta e tot. Am studiat bazele Redux pentru crearea aplicației și chiar puțin mai profund. Ne-am familiarizat cu diverse instrumente utile. Vă doresc succes în crearea aplicațiilor voastre Redux!

Deschideți aplicația voastră cu studenții. După ce ați studiat materialele lecției, în folderul teachers creați fișierul TeacherPage.jsx. În codul componentului TeacherPage obțineți obiectul cu profesorul necesar și toți studenții acestui profesor. Folosind map creați din ei o listă, fie numele complet al fiecărui student să fie un link către pagina acestui student.

În markup-ul returnat să aveți un titlu cu numele complet al profesorului, mai jos un titlu mai mic - cu materia, pe care o predă, și mai jos o listă cu studenții săi.

În App.jsx conectați încă o rută copil pentru pagina cu profesorul.

Porniți aplicația voastră și asigurați-vă, că totul funcționează.