Վաճառողի Էջը Redux-ում

Մնացել է միայն մի քիչ։ Եկեք այս դասին կատարենք վերջին գործողությունը՝ ավելացնենք մեր հավելվածում յուրաքանչյուր վաճառողի համար առանձին էջ։ Այստեղ կլինեն միայն ձեզ արդեն ծանոթ գործողություններ։ Եկեք սկսենք։

Բացենք մեր ապրանքների հավելվածը, իսկ դրա մեջ sellers պանակը։ Այս պանակում ստեղծենք SellerPage.jsx ֆայլը։ Այժմ սկսենք գրել SellerPage կոդը մեր կոմպոնենտի համար։

export const SellerPage = () => {}

Սկզբում ստացենք վաճառողի id-ն և դրա միջոցով գտնենք անհրաժեշտ վաճառողի օբյեկտը սլայսում։

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

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

Հաջորդիվ, ներքևում գտնվող SellerPage-ի կոդում վաճառողին ստանալուց հետո մենք կստանանք բոլոր ապրանքները, ապա դրանցից կընտրենք միայն այնպիսիները, որոնք տեղադրել է տվյալ վաճառողը։

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

Իսկ հետո ընտրված ապրանքների անվանումներից կստեղծենք ցուցակ՝ օգտագործելով map։ Ընդ որում, այս ցուցակում ապրանքի յուրաքանչյուր անվանում կլինի հղում դեպի այդ ապրանքի էջը։

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

Եվ վերջում SellerPage-ի կոդում կվերադարձնենք վերստը՝ վաճառողի անվանումով վերնագիր և այդ վաճառողի կողմից տեղադրված ապրանքների ցուցակը։

return (
	<div>
	<h2>Վաճառող՝ {seller.name}</h2>

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

Իհարկե, մեզ անհրաժեշտ է նաև երթուղի վաճառողի էջի համար։ Բացենք App.jsx ֆայլը և ավելացնենք այն որպես վերջինը երեխա երթուղիներում։

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

Մի մոռացեք իմպորտել անհրաժեշտ հուկերը և կոմպոնենտները SellersPage.jsx և App.jsx ֆայլերում։

Եկեք գործարկենք մեր հավելվածը, բեռնենք ապրանքները, ապա ձախ կողմի ընտրացանկում կտտացնենք 'Sellers' հղման վրա։ Այժմ մենք կարող ենք մտնել ցանկացած վաճառողի էջ՝ կտտացնելով նրա անվան վրա, ապա նրա էջում տեսնել բոլոր իր ապրանքները։ Իսկ կտտացնելով դրանցից ցանկացածի վրա՝ կմտնենք այդ ապրանքի էջ։

Դրա վրա առայժմ ամեն ինչ։ Մենք ուսումնասիրեցինք Redux-ի հիմունքները հավելված ստեղծելու համար և նույնիսկ մի քիչ խորը։ Ծանոթացանք տարբեր օգտակար գործիքների հետ։ Ձեզ հաջողություն եմ մաղթում ձեր Redux-հավելվածները ստեղծելու հարցում։

Բացեք ձեր ուսանողների հավելվածը։ Դասի նյութերը ուսումնասիրելուց հետո, teachers պանակում ստեղծեք TeacherPage.jsx ֆայլը։ TeacherPage կոմպոնենտի կոդում ստացեք անհրաժեշտ ուսուցչի օբյեկտը և տվյալ դասախոսի բոլոր ուսանողներին։ Օգտագործելով map ստեղծեք դրանցից մի ցուցակ, թող յուրաքանչյուր ուսանողի ԱԱՀ-ն լինի հղում դեպի այդ ուսանողի էջը։

Թող վերադարձվող վերստում լինի վերնագիր ուսուցչի ԱԱՀ-ով, ներքևում լինի ավելի փոքր վերնագիր՝ նրա դասավանդող առարկայի անվանումով, իսկ ներքևում՝ նրա ուսանողների ցուցակը։

App.jsx ֆայլում միացրեք ևս մեկ երեխա երթուղի՝ ուսուցչի էջի համար։

Գործարկեք ձեր հավելվածը և համոզվեք, որ ամեն ինչ աշխատում է։