მონაცემების გამოყენება Redux-ის სლაისიდან მრავალჯერ

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

გავხსნათ ჩვენი პროდუქტების აპლიკაცია. მოდით ახლა ფოლდერში products შევქმნათ კიდევ ერთი ფაილი SellerOfProd.jsx. დასაწყისისთვის იმპორტირებულ გავხადოთ ჰუკი useSelector, რომლის დახმარებითაც ჩვენ მივიღებთ სლაისს სასურველი პროდუქტით:

import { useSelector } from 'react-redux'

შემდეგ მოვიზიდოთ store-დან სასურველი პროდუქტი გამყიდველის id-ის მიხედვით, რომელსაც ჩვენ გადავცემთ ჩვენს ახალ კომპონენტს პროფებში:

export const SellerOfProd = ({ sellerId }) => {
	const seller = useSelector((state) =>
		state.sellers.find((seller) => seller.id === sellerId)
	)
}

და იმ შემთხვევაში, თუ ასეთი გამყიდველი არსებობს, ჩვენ დავაბრუნებთ მის სახელს, ხოლო თუ არა, დავაბრუნებთ 'unknown'-ს:

return <span>by {seller ? seller.name : 'unknown'}</span>

მოდით ახლა იმპორტირებულ გავხადოთ ჩვენი ახალი კომპონენტი ProductsList.jsx-ში და ჩავსვათ ის ProductsList ფუნქციაში პროდუქტის სახელის სათაურის შემდეგ. როგორც ხედავთ, ჩვენ მას პროფებში გადავეცით id:

<SellerOfProd sellerId={product.seller} />

ახლა, თუ ჩვენ ჩავრთავთ ჩვენს აპლიკაციას, დავამატებთ ახალ პროდუქტს და ვიპოვით მას სიაში, დავინახავთ, რომ მას გამყიდველიც ემატება, ხოლო იმ პროდუქტებს, რომლებიც ავტომატურად დაემატა აპლიკაციის გაშვებისას, ექნებათ 'unknown'.

მცირე გადახვევა: თუ თქვენი eslint რედაქტორ VS Code-ში წუწუნებს sellerId-ზე, ხოლო აპლიკაცია მუშაობს, მაშინ თქვენ შეგიძლიათ ამის იგნორირება დროებით, ან გახსნათ ფაილი .eslintrc.cjs თქვენი აპლიკაციის და rules-ში დაამატოთ "react/prop-types": "off".

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

<SellerOfProd sellerId={product.seller} />

გახსენით თქვენი სტუდენტების აპლიკაცია. გაკვეთილის მასალის შესწავლის შემდეგ, ფოლდერში students შექმენით ფაილი კომპონენტისთვის TeacherForStudent. შედეგად კომპონენტმა უნდა დააბრუნოს ლექტორის სრული სახელი და გვარი, ხოლო გვერდით ფრჩხილებში საგანი, რომელსაც ის ასწავლის. საჭირო ლექტორი იპოვეთ ჰუკის useSelector დახმარებით. თუ ლექტორი მოცემული სტუდენტისთვის არ არსებობს, გამოიტანეთ 'anonym'.

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

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