Redux-da Formalar ve Lokal Steytlar

Kecen derslerde biz datani storedan almaqi ve onu React komponentinde gostermeyi oyrenmisik. Bu dersde ise biz yeni data elave etmeye baslayacagiq. Bunu bir formadan istifade ederek edeceyik, hansi ki, doldurulduqda, satici yeni bir mehsul elave ede bilecek.

Gelin evvelden baslayaq ki, her zaman qlobal Redux steytinden istifade etmek mantiqli deyil. Bezenler ehtiyaclarimiz ucun biz lokal steytler yarada bilerik. Lokal steytler deyende, biz texniki ehtiyaclar ucun mueyyen bir komponent daxilinde istifade olunan steytleri nezerde tuturuq. Meselen, bir duymeye basdiqda bir seyi gizletmek ve ya gostermek ucun.

Bizim veziyyetimizde istifadeci forma daxilinde datani daxil edecek ve tebii ki, buna gore bize steytler lazim olacaq. GLOBAL Redux steytinden istifade etmek olardi, amma bunda hec bir mena yoxdur, cunki bizim steytlerimiz yalniz mehsul elave etme formasi ucun tetbiqin bir yerinde isleyecek. Bu zaman esas riayet edilmesi lazim olan qayda budur ki, lokal steytler yaradildiqlari komponentden kenarda islememelidir ve hec bir halda store-a toxunmamalidir. Bu cur tedbir cox vaxt formalar yaradilan zaman istifade olunur.

Gelin products qovlugunu acaq mehsul tetbiqimizde, icinde NewProductForm.jsx fayli yaradaq ve icinde useState hukunu import edek:

import { useState } from 'react'

Indi ise komponentin ozunu formada yaradaq ve icinde adi steytleri elan edek, evvelceden React-da etdiyimiz kimi. Bize lazimdir mehsulun adi, acixlamasi, qiymeti ve miqdari ucun steytler:

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

Daha sonra her bir sahe ucun standart emeliyyati istifadeci terefinden data daxil edilen zaman elave edek:

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)

Ve sonra komponentde basliq ve bos forma ile verstkani qaytaraq:

return (
	<div>
		<h2>Yeni Mehsul Elave Et</h2>
		<form>
		</form>
	</div>
)

Telebe tetbiqinizi acin. students qovlugunda NewStudentForm.jsx fayli yaradin. NewStudentForm komponentinde lazim olan saheler ucun lokal steytler yaradin, her bir sahe ucun emeliyyati dersde gosterildiyi kimi yazin.

NewStudentForm komponentinde basliq ve bos forma olan verstkani qaytarin.