მონაცემთა მომზადება action-ის ობიექტისთვის Redux-ში

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

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

dispatch(productAdded({
	id: nanoid(), name, desc, price, amount
}))

აქ ჩვენ ვაგროვებთ payload ობიექტს პირდაპირ React კომპონენტში და ვგზავნით მას action-ში productAdded. რა მოხდება, თუ ასეთივე action-ის გაგზავნა მოგვიწევს რამდენიმე კომპონენტიდან ან ლოგიკა შეგროვებისთვის რთული აღმოჩნდება? იდეით, ჩვენს კომპონენტს არ უნდა აინტერესებდეს, როგორ გამოიყურება ობიექტი payload-ში ამ action-ისთვის. ამას გარდა, ჩვენ არ გვესამოვნება კოდის მუდმივი დუბლირება.

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

{reducer, prepare}

გავხსნათ ჩვენი ფაილი productsSlice.js და შევცვალოთ კოდი რედიუსერისთვის productAdded. ახლა კოდის ეს ნაწილი:

productAdded(state, action) {
	state.push(action.payload)
},

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

productAdded: {
	reducer(state, action) {
		state.push(action.payload)
	},
	prepare(name, desc, price, amount) {
		return {
			payload: {
				id: nanoid(),
				name,
				desc,
				price,
				amount,
			},
		}
	},
},

რადგან ახლა ჩვენ id-ს აქ დავაგენერირებთ, და არა კომპონენტში, დავამატოთ nanoid იმპორტში:

import { createSlice, nanoid } from '@reduxjs/toolkit'

დასასრულს, შევიტანოთ ცვლილებები NewProductForm.jsx-ში. ნაცვლად სტრიქონისა:

dispatch(productAdded({
	id: nanoid(), name, desc, price, amount
}))

გვექნება ასეთი, რომელშიც ჩვენ უბრალოდ მძიმით გამოყოფით გადავცემთ საჭირო მონაცემებს (არ დაგავიწყდეთ ამ ფაილში წაშალოთ nanoid იმპორტიდან):

dispatch(productAdded(name, desc, price, amount))

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

გახსენით თქვენი აპლიკაცია სტუდენტებით. ფაილში StudentsSlice.js გადაწერეთ თქვენი რედიუსერი studentAdded ისე, რომ იგი იყოს ობიექტის სახით {reducer, prepare}, როგორც ეს ნაჩვენებია გაკვეთილზე.

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