დამატებითი ლოგიკის დამატება Redux აპლიკაციაში

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

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

const reactionObj = {
	good: '+',
	soso: '+/-',
	bad: '-',
}

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

export const UserReactions = ({ product }) => {}

ახლა ფიგურულ ფრჩხილებში დავწეროთ ფუნქციის UserReactions სხეული. ამისთვის გადავუყვებით map-ის დახმარებით ჩვენი reactionObj-ის გასაღები-მნიშვნელობის წყვილებს, თითოეულისთვის მივიღებთ აღნიშვნას ღილაკისთვის ('+', '+/-' ან '-') და რიცხვით მნიშვნელობას ამა თუ იმ რეაქციის (მას ჩვენ ვიღებთ product-დან store-ში რეაქციის სახელის მიხედვით):

const userReactions = Object.entries(reactionObj).map(([name, image]) => {
	return (
		<button key={name} type="button" className="reaction-button">
			{image} {product.reactions[name]}
		</button>
	)
})

და ამის შემდეგ ფუნქციის კოდის ბოლოს დავაბრუნებთ ვერსტკას ღილაკებით userReactions:

return <div>{userReactions}</div>

ასევე დავამატოთ ცოტა მეტი სტილი index.css-ში:

.reaction-button {
	margin-right: 10px;
	margin-bottom: 10px;
}

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

გახსენით თქვენი აპლიკაცია სტუდენტებთან. თქვენს აპლიკაციაში იქნება შესაძლებლობა მომხმარებლებისთვის აირჩიონ სტუდენტებს შორის ჯგუფის ხელმძღვანელი და სპორტული გუნდის კაპიტანი. ამიტომ, გაკვეთილის მასალების შესწავლის შემდეგ, შექმენით ფოლდერში students ფაილი UserVotes.jsx. ფაილის დასაწყისში შექმენით ობიექტი votesObj, რომელშიც თქვენ გექნებათ ორი თვისება - leader და captain, მნიშვნელობებით GL და TC, როგორც აღნიშვნა ღილაკებისთვის.

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