Redux-daky söwdagaryň sahypasy

Iş az galdy. Geliň bu sapakda iň soňky zadymy edeliň - programmamyza her bir söwdagaryň aýratyn sahypasyny goşalyň. Bu ýerde size ýatan işlerden başga zat bolmaz. Geliň başlalyň.

Önümler bar programmamyzy açalyň, we onda sellers faýldyrynyň içinde SellerPage.jsx faýlyny dörediň. Indi komponentimiz üçin SellerPage kodyny ýazyp başlalyň:

export const SellerPage = () => {}

Ilki bilen söwdagaryň id-syny alalyň we onuň üsti bilen slice-daky zerur söwdagaryň obyektini tapalyň:

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

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

Indiki ýerde, SellerPage üçin kodda söwdagary alanyňyzdan soň, biz ähli önümleri alarys, soňra olaryň arasyndan diňe şu söwdagaryň goýan önümlerini saýlarys:

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

Soňra saýlanan önümleriň adlaryndan map ýardamy bilen sanaw dörederiň. Emma bu sanawdaky her önümiň ady şol önümiň sahypasyna baglanyşyk bolmaly:

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

We SellerPage üçin kodyň ahyrynda, sahypanyň gurluşyny yzygider ederiň: söwdagaryň ady bilen ýokarky hat we şu söwdagaryň goýan önümleriniň sanawy:

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

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

Elbetde, bizä söwdagaryň sahypasy üçin ýörelge hem gerek. App.jsx faýlyny açalyň we ony iň soňky çaga ýörelgeleriň arasyna goşalyň:

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

SellersPage.jsx we App.jsx faýllaryna zerur gakyklary we komponentleri import etmegi ýatdan çykarmaň.

Programmamyzy işledeliň, önümleri ýükliň, soňra çep tarapdaky menýuda 'Sellers' baglanyşygyna basalyň. Indi biz islendik söwdagaryň sahypasyna girip bileris, onuň adyna basanyňyzdan soň, soňra onuň sahypasynda ähli önümlerini göreris. Emma, onuň önümleriniň birine basanyňyzda, şol önümiň sahypasyna girersiniz.

Häzirlikçe bu ýerde. Biz programma döretmek üçin Redux-yň düýplerini öwrendik we hatda birneme çuňlukda hem. Ürän amatly gurallar bilen tanyşdyk. Redux programmalaryňyzy döretmekde sizä üstünlik isleýärin!

Studentlar bar programmanyňyzy açyň. Sapak materiallaryny öwrenip, teachers faýldyrynyň içinde TeacherPage.jsx faýlyny dörediň. TeacherPage komponentiniň kodunda zerur mugallymyň objekti we şu mugallymyň ähli studentlaryny alyň. Map ýardamy bilen olardan sanaw dörediň, her bir studentiň ADSY şol studentiň sahypasyna baglanyşyk bolsun.

Yzyna gaýdarylýan sahypa gurluşynda mugallymyň ADSY bilen ýokarky hat bolsun, aşakda kiçiräk hat - onuň okadýan predmeti, we ondan aşakda onuň studentlarynyň sanawy.

App.jsx faýlynda mugallymyň sahypasy üçin ýene bir çaga ýörelgesini birikdiriň.

Programmanyňyzy işlediň we hemme zadyň işleýändigine göz ýetiriň.