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 файлдарында қажетті хуктар мен компоненттерді импорттауды ұмытпаңыз.

Қолданбамызды іске қосамыз, өнімдерді жүктейміз, содан кейін сол жақтағы мәзірде 'Сатушылар' сілтемесін басамыз. Енді біз кез келген сатушының бетіне оның атауын басу арқылы кіре аламыз, содан кейін оның бетінде барлық өнімдерін көре аламыз. Ал, оның өнімдерінің кез келгеніне басу арқылы сол өнімнің бетіне кіреміз.

Әзірге осымен болды. Біз қолданба жасау үшін Redux-тің негіздерін зерттеп, тіпті біршама тереңірек білдік. Әр түрлі пайдалы құралдармен таныстық. Сізге Redux-қолданбаларыңызды жасауда сәттілік тілеймін!

Студенттеріңіз бар қолданбаңызды ашыңыз. Сабақ материалын зерттеп, teachers бумасында TeacherPage.jsx файлын жасаңыз. TeacherPage компонентінің кодында қажетті мұғалім объектісін және осы оқытушының барлық студенттерін алыңыз. map көмегімен олардан тізім жасаңыз, әрбір студенттің аты-жөні сол студенттің бетіне сілтеме болсын.

Қайтарылатын версткада сізде мұғалімнің аты-жөні бар тақырып, төменірек - оның оқытатын пәні бар кішірек тақырып, ал одан да төмен оның студенттерінің тізімі болсын.

App.jsx файлында мұғалім беті үшін тағы бір балалар маршрутын қосыңыз.

Қолданбаңызды іске қосыңыз және бәрі жұмыс істейтініне көз жеткізіңіз.