Страна продавца у 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 повежите још једну дечју руту за страницу са предавачем.

Покрените вашу апликацију и уверите се, да све ради.