ფორმები და ლოკალური სთეითები Redux-ში

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

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

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

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

import { useState } from 'react'

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

export const NewProductForm = () => {
	const [name, setName] = useState('')
	const [desc, setDesc] = useState('')
	const [price, setPrice] = useState(0)
	const [amount, setAmount] = useState(0)
}

შემდეგ დავამატოთ სტანდარტული დამუშავება თითოეული ველისთვის მომხმარებლის მიერ მონაცემების შეყვანისას:

const onNameChanged = (e) => setName(e.target.value)
const onDescChanged = (e) => setDesc(e.target.value)
const onPriceChanged = (e) => setPrice(e.target.value)
const onAmountChanged = (e) => setAmount(e.target.value)

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

return (
	<div>
		<h2>ახალი პროდუქტის დამატება</h2>
		<form>
		</form>
	</div>
)

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

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