გამყიდველის გვერდი 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-ში მიაბათ კიდევ ერთი შვილობილი მარშრუტი მასწავლებლის გვერდისთვის.

გაუშვით თქვენი აპლიკაცია და დარწმუნდით, რომ ყველაფერი მუშაობს.