Redux'ta Formlar ve Yerel State'ler

Önceki derslerde, store'dan veri almayı ve bunları React bileşeninde görüntülemeyi öğrendik. Bu derste, yeni veri eklemeye başlayacağız. Bunu, doldurulduğunda satıcının yeni bir ürün ekleyebileceği bir form kullanarak yapacağız.

Yerel state'leri oluşturabileceğimiz durumlar olduğu için Redux'un global state'ini kullanmanın her zaman anlamlı olmadığı gerçeğiyle başlayalım. Yerel state'ler, belirli bir bileşen içinde teknik ihtiyaçlar için kullanılan state'leri ifade eder. Örneğin, bir düğme ile bir şeyi gizlemek veya göstermek için.

Bizim durumumuzda, kullanıcı forma veri girecek ve bunun için doğal olarak state'lere ihtiyacımız olacak. Global Redux state'ini kullanabilirdik, ancak bunun bir anlamı yok, çünkü state'lerimiz yalnızca uygulamanın ürün ekleme formu için bir yerinde çalışacak. Bu konuda izlenmesi gereken temel kural, yerel state'lerin oluşturuldukları bileşenin dışında çalışmamaları ve hiçbir şekilde store'u etkilememeleridir. Bu uygulama, form oluştururken sıklıkla kullanılır.

Hadi products ürün uygulamamızın klasörünü açalım, içinde NewProductForm.jsx dosyasını oluşturalım ve içine useState kancasını içe aktaralım:

import { useState } from 'react'

Şimdi formun kendisini içeren bileşeni oluşturalım ve içine daha önce React'ta yaptığımız gibi sıradan state'leri yazalım. Ürün adı, açıklama, fiyat ve miktarı ile çalışmak için state'lere ihtiyacımız var:

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

Daha sonra, kullanıcı veri girdiğinde her bir alan için standart işleme ekleyelim:

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 ardından bileşende bir başlık ve boş form içeren biçimlendirmeyi döndürelim:

return (
	<div>
		<h2>Yeni Bir Ürün Ekle</h2>
		<form>
		</form>
	</div>
)

Öğrenci uygulamanızı açın. students klasöründe NewStudentForm.jsx dosyasını oluşturun. NewStudentForm bileşeninde ihtiyacınız olan alanlar için yerel state'ler tanımlayın, derste gösterildiği gibi her alan için işleme yazın.

NewStudentForm bileşeninde, bir başlık ve boş bir form içeren biçimlendirmeyi döndürün.