რედიუსერის დამატება Redux აპლიკაციაში

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

გავხსნათ ჩვენი პროდუქტების აპლიკაცია, და მასში ფაილი productsSlice.js ყველა რედიუსერით. ახლა reducers თვისებაში შევქმნათ კიდევ ერთი რედიუსერი reactionClicked (შეგვიძლია დავსვათ ის პირველი - productAdded-მდე, თუმცა ამას მნიშვნელობა არ აქვს). როგორც ყოველთვის, მივაწოდოთ მას პარამეტრებად state და action:

reactionClicked(state, action) {},

ახლა კი ფიგურულ ფრჩხილებში, რომელიც ჩვენ წინა ნაბიჯზე ცარიელი დავტოვეთ, დავწეროთ მისთვის კოდი. პირველ რიგში, ამოვიღებთ პროდუქტის id-ს payload ობიექტიდან action და რეაქციის სახელს:

const { productId, reaction } = action.payload

შემდეგ, მიღებული სტეიტიდან მივიღოთ საჭირო პროდუქტი:

const currentProduct = state.find(product => product.id === productId)

და თუ ასეთი პროდუქტი არსებობს, გავზარდოთ გადაცემული რეაქციის მნიშვნელობა 1-ით:

if (currentProduct) {
	currentProduct.reactions[reaction]++
}

სულ ეს არის, ჩვენი კოდი reactionClicked-ისთვის მზად არის:

reactionClicked(state, action) {
	const { productId, reaction } = action.payload
	const currentProduct = state.find(product => product.id === productId)
	if (currentProduct) {
		currentProduct.reactions[reaction]++
	}
},

დავასრულოთ ფაილის ბოლოს მიღებული action creator-ის ექსპორტის დამატებით:

export const {
	reactionClicked,
	productAdded,
	productUpdated
} = productsSlice.actions

აქ უნდა აღინიშნოს ორი მნიშვნელოვანი მომენტი. როგორც გახსოვთ წინა გაკვეთილებიდან - სტეიტში მნიშვნელობის პირდაპირ ასე განახლება რედიუსერის კოდში აკრძალულია (შეხედეთ ამ სტრიქონს: reactions[reaction]++), მაგრამ ჩვენ ეს მოგვეცემა ხელიდან, რადგან ჩვენ ამას ვაკეთებთ createSlice-ის შიგნით, რომელიც იყენებს Immer ბიბლიოთეკას. ის დაიზრუნებს იმაზე, რომ გადააკეთოს ჩვენი კოდი მნიშვნელობის "უსაფრთხო" განახლებად. ეს გვაძლევს საშუალებას დავწეროთ რთული რამეები უფრო მარტივი გზით.

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

გახსენით თქვენი სტუდენტების აპლიკაცია და ფაილში studentsSlice.js დაამატეთ კიდევ ერთი რედიუსერი voteClicked reducers ველში, როგორც ნაჩვენებია გაკვეთილში. დაწერეთ მისთვის კოდი. თქვენი რედიუსერის ამოცანაა - დაწკაპუნებისას გაზარდოს vote (ან ხმის) მნიშვნელობა, რომელზეც დაწკაპუნებულა, მოცემული სტუდენტისთვის, 1-ით.

ფაილის ბოლოს არ დაგავიწყდეთ მიღებული action creator-ის voteClicked ექსპორტი.