გამყიდველების სია Redux-ში

წინა გაკვეთილებზე ჩვენ დავამთავრეთ მთავარი მასალა. ახლა thunk-ის დახმარებით ჩვენ ვიღებთ პროდუქტების სიას სერვერიდან და შეგვიძლია შევინახოთ ახალი პროდუქტი სერვერზე. მოდით გავერკვიეთ გამყიდველებში. ყოველივე ამის შემდეგ, ჩვენ ვიღებთ მონაცემებს მათთვისაც. მოდით გავაკეთოთ ცალკე გვერდი გამყიდველების სიით.

გავხსნათ ჩვენი აპლიკაცია პროდუქტებით, ხოლო მასში ფოლდერი sellers. შევქმნათ ამ ფოლდერში ფაილი SellersList.jsx. აქ ჩვენ გამოვიყენებთ useSelector, Link და selectAllSellers-ს, რომლის კოდსაც ჩვენ დავწერთ sellersSlice.js-ში ცოტა მოგვიანებით:

import { useSelector } from 'react-redux'
import { Link } from 'react-router-dom'
import { selectAllSellers } from './sellersSlice'

შემდეგ შევქმნათ თავად SellersList. მასში ჩვენ მივიღებთ ყველა გამყიდველს hook-ის useSelector დახმარებით, შემდეგ მივიღებთ ვერსტკას გამყიდველების სიისთვის ციკლში map, ხოლო თითოეული გამყიდველის სახელი იქნება ბმული მის გვერდზე. და ბოლოს დავაბრუნებთ ვერსტკას სათაურით და მიღებული სიით:

export const SellersList = () => {
	const sellers = useSelector(selectAllSellers)
	const sellersToRender = sellers.map((seller) => (
		<li key={seller.id}>
			<Link to={`/sellers/${seller.id}`}>{seller.name}</Link>
		</li>
	))

	return (
		<div>
			<h2>გამყიდველები:</h2>

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

შემდეგ მივიდეთ ფაილში sellersSlice.js და ანალოგიით სელექტორებთან productsSlice.js-ში შევქმნათ ფაილის ბოლოში ორი სელექტორი რედიუსერის ექსპორტის შემდეგ:

export const selectAllSellers = (state) => state.sellers

export const selectSellerById = (state, sellerId) =>
state.sellers.find((seller) => seller.id === sellerId)

ახლა ჩვენ უნდა დავწეროთ მარშრუტი სიის გვერდისთვის, ამისთვის გავხსნათ ფაილი App.jsx და შვილი მარშრუტების მასივში children დავამატოთ კიდევ ერთი ობიექტი (არ დაგავიწყდეთ კომპონენტის იმპორტი SellersList):

{
	path: '/sellers',
	element: <SellersList />,
},

რომ ჩვენმა ბმულმა 'გამყიდველები' მენიუში იმუშაოს, მოდით წავიდეთ ფაილში root.jsx (როგორ ძველი დროა ... ) და შევცვალოთ ტეგი a ელემენტით NavLink:

<NavLink to="/sellers" end>
	გამყიდველები
</NavLink>

და ბოლოს. რომ ჩვენს მენიუში გამოიყოს აქტიური ბმული, და გასაგები იყოს რომელ გვერდზე ვართ, ჩვენ დავამატებთ სტილს index.css-ში:

nav a.active {
	color: purple;
}

გავუშვათ ჩვენი აპლიკაცია. ახლა ჩვენ შეგვიძლია წავიდეთ გამყიდველების გვერდზე, მენიუში 'გამყიდველები'-ზე დაწკაპუნებით. რა თქმა უნდა, ჯერ საჭიროა მენიუში 'პროდუქტები'-ზე დაწკაპუნება, თორემ ჩვენი პროდუქტები არ ჩაიტვირთება. შემდეგ გაკვეთილზე ჩვენ გავაკეთებთ გვერდს თითოეული გამყიდველისთვის და ამით დავასრულებთ ამ სახელმძღვანელოს შესწავლას Redux-ზე.

გახსენით თქვენი აპლიკაცია სტუდენტებით. გაკვეთილის მასალების შესწავლის შემდეგ, ფოლდერში teachers შექმენით ფაილი TeachersList.jsx. ამ კომპონენტის დახმარებით თქვენ გამოიტანთ ლექტორთა სიას. იმპორტირებეთ მასში საჭირო კომპონენტები და hook-ები.

დაწერეთ კოდი კომპონენტისთვის TeachersList, მიიღეთ მასში ყველა ლექტორი და გააკეთეთ ლექტორთა სია teachersToRender, ნება ამ სიის თითოეულ სტრიქონში გამოისახება მათი გვარები და ინიციალები, ხოლო ფრჩხილებში საგანი, რომელსაც ისინი ასწავლიან. ნება თითოეული გვარი და ინიციალები ერთად იყოს ბმული, რომელიც მიუთითებს ცალკე გვერდზე თითოეული ლექტორისთვის. შემდეგ კომპონენტის კოდის ბოლოს დააბრუნეთ ვერსტკა სათაურით და შექმნილი სიით.

teachersSlice.js-ის ბოლოს შექმენით ფუნქციები-სელექტორების წყვილი selectAllTeachers და selectTeacherById, როგორც ნაჩვენებია გაკვეთილზე.

App.jsx-ში დააკავშირეთ კიდევ ერთი შვილი მარშრუტი ლექტორთა გვერდისთვის.

ფაილში root.jsx მენიუში 'ლექტორები'-ისთვის შეცვალეთ ტეგი a NavLink-ით, როგორც ნაჩვენებია გაკვეთილზე. გახადეთ ისე, რომ აქტიური ბმული მენიუში როგორმე გამოიყოს, ამისთვის სტილების დამატებით index.css-ში.