Redux'ta Veri Düzenleme Formu

Artık store'daki verileri değiştirmek için bir reducer'ımız var. Bu derste, bir ürünün verilerini düzenleyebileceğimiz bir form oluşturacağız.

Ürün uygulamamızı açalım ve products klasöründe EditProductForm.jsx dosyasını oluşturalım. EditProductForm bileşeninin oluşturulması, üzerinde duracağımız bazı farklılıklar dışında NewProductForm ile benzer olacaktır. Bu nedenle NewProductForm.jsx dosyasındaki kodu tamamen kopyalayın ve oluşturduğunuz EditProductForm.jsx dosyasına yapıştırın. Şimdi sırayla başlayalım.

İthalattan nanoid'i kaldırın, burada bir id oluşturmamıza gerek yok. productAdded ithalatını productUpdated ile değiştirin, çünkü burada ürün eklemek yerine güncelleme işlemi için eylemi kullanacağız.

Daha sonra bileşen fonksiyonumuzun adını NewProductForm yerine EditProductForm olarak değiştireceğiz.

EditProductForm fonksiyonunda name, desc, price ve amount için yerel state'leri tanımlamadan önce, birkaç satır daha kod ekleyelim. Daha önce de belirttiğimiz gibi, burada bir id oluşturmamıza gerek yok. Şimdi görevimiz, düzenlenen ürünün verilerinden bunu elde etmek. Bunu daha önce bir ürün için ayrı bir sayfa oluştururken de yapmıştık. useParams kancasını kullanarak id'yi alalım, ardından useSelector kancasını kullanarak (dosyanın başında her iki kancayı da ithal etmeyi unutmayın) ihtiyacımız olan ürünü bulalım:

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

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

Bundan sonra yerel state'lerin tanımlandığı bloğu değiştirelim. Artık onlara başlangıç değeri olarak store'dan alınan ürün verilerini atamamız gerekiyor. İlk state şöyle görünecek, kalan üçünü kendiniz değiştirin:

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

useDispatch için değişken atandıktan sonra, bu sefer useNavigate kancası için bir satır daha kod ekleyelim. Kullanıcı formda yapılan değişiklikleri kaydettiğinde, ürün sayfasına dönmek için bunu kullanacağız:

const navigate = useNavigate()

Ayrıca bu kancayı dosyanın başında içe aktarın:

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

Daha sonra giriş alanları için işleyiciler geliyor. Onlardan sonra onSaveProductClick fonksiyonunu düzeltmemiz gerekiyor. Artık tıklandığında, alınan id'yi ve değiştirilmiş verileri bir nesne olarak içeren productUpdated eylemini göndereceğiz. Ardından, düzenlenen ürünün sayfasına geçiş yapmak için navigate ekleyeceğiz:

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

Geri döndürdüğümüz işaretlemede şu satırı bulmamız kaldı:

<h2>Add a New Product</h2>

Ve bunu şununla değiştirin:

<h2>Edit Product</h2>

Öğrenci uygulamanızı açın. NewStudentForm.jsx dosyasına benzer şekilde EditStudentForm.jsx dosyasını oluşturun. Derste gösterildiği gibi içinde değişiklikler yapın.