მონაცემთა რედაქტირების ფორმა Redux-ში

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

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

ამოიღეთ იმპორტიდან nanoid, აქ ჩვენ არ გვჭირდება id-ის გენერირება. შეცვალეთ იმპორტი productAdded productUpdated-ით, რადგან აქ ჩვენ გამოვიყენებთ action-ს განახლებისთვის, და არა დამატებისთვის პროდუქტის.

შემდეგ შევცვალოთ ჩვენი კომპონენტის ფუნქციის სახელი NewProductForm-დან EditProductForm-ზე.

სანამ ჩვენ შევქმნით ლოკალურ state-ებს ფუნქციაში EditProductForm name-ისთვის, desc-ისთვის, price-ისთვის და amount-ისთვის, მოდით ჩავსვათ კიდევ რამდენიმე სტრიქონი კოდი. როგორც უკვე აღვნიშნეთ, აქ ჩვენ არ გვჭირდება id-ის გენერირება. ახლა ჩვენი ამოცანაა მისი მიღება შესაცვლელი პროდუქტის მონაცემებიდან. ჩვენ უკვე გავაკეთეთ ეს პროდუქტის ცალკე გვერდის შექმნისას. ასე რომ, მივიღოთ id hook-ის useParams დახმარებით, შემდეგ კი ვიპოვოთ საჭირო პროდუქტი, hook-ის useSelector გამოყენებით (არ დაგავიწყდეთ ორივე hook-ის იმპორტი ფაილის დასაწყისში):

let params = useParams()
const { productId } = params

const product = useSelector((state) =>
	state.products.find((product) => product.id === productId)
)

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

const [name, setName] = useState(product.name)

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

const navigate = useNavigate()

ასევე შემოვიტანოთ ეს hook-ი ფაილის დასაწყისში:

import { useNavigate, useParams } from 'react-router-dom'

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

const onSaveProductClick = () => {
	if (name && desc && price && amount) {
		dispatch(
			productUpdated({
				id: productId,
				name,
				desc,
				price,
				amount,
			})
		);
		
		navigate(`/products/${productId}`);
	}
}

დარჩა მხოლოდ ჩვენს დასაბრუნებელ ვერსტკაში ვიპოვოთ სტრიქონი:

<h2>Add a New Product</h2>

და შევცვალოთ იგი:

<h2>Edit Product</h2>

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