Саҳифаи фурӯшанда дар 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 роҳи фарзанди дигареро барои саҳифаи муаллим пайваст кунед.

Барномаи худро оғоз кунед ва боварӣ ҳосил кунед, ки ҳама чиз кор мекунад.