Старгонца прадаўца ў 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={`/by/products/${product.id}`}>{product.name}</Link>
	</li>
))

І ў канцы кода для SellerPage вернем вёрстку: загаловак з назвай прадаўца і спіс прадуктаў, якія выклаў гэты прадавец:

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

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

Вядома ж нам яшчэ патрэбны маршрут для староначкі прадаўца. Адкрыем файл App.jsx і дадамо яго апошнім да даччыных маршрутаў:

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

Не забудзьце імпартаваць неабходныя хукі і кампаненты ў SellersPage.jsx і App.jsx.

Запусцім наша дадатак, пагрузім прадукты, а затым у менюшцы злева клікнем па спасылцы 'Sellers'. Цяпер мы можам зайсці на староначку любога прадаўца, клікнуўшы па яго назве, а затым на яго староначцы ўбачыць усе яго прадукты. А, клікнуўшы па любом з яго прадуктаў, зайдзем на староначку з гэтым прадуктам.

На гэтым пакуль усё. Мы вывучылі асновы Redux для стварэння дадатку і нават крыху глыбей. Пазнаёміліся з рознымі карыснымі інструментамі. Жадаю вам поспехаў у стварэнні вашых Redux-дадаткаў!

Адкрыйце ваша дадатак са студэнтамі. Вывучыўшы матэрыялы ўрока, у папцы teachers стварыце файл TeacherPage.jsx. У кодзе кампанента TeacherPage атрымайце аб'ект з патрэбным настаўнікам і ўсіх студэнтаў дадзенага выкладчыка. Пры дапамозе map стварыце з іх спіс, хай ПІБ кожнага студэнта будзе спасылкай на староначку гэтага студэнта.

Хай у якой вяртаецца вёрстцы ў вас будзе загаловак з ПІБ выкладчыка, ніжэй будзе загаловак паменш - з прадметам, які ён вядзе, а яшчэ ніжэй спіс яго студэнтаў.

У App.jsx падключыце яшчэ адзін даччыны маршрут для староначкі з выкладчыкам.

Запусціце ваша дадатак і пераканайцеся, што ўсё працуе.