Form untuk Mengedit Data di Redux

Sekarang kita memiliki reducer untuk mengubah data di store. Pada pelajaran ini kita akan membuat sebuah form, dengan bantuan form ini kita bisa mengedit data produk.

Mari buka aplikasi produk kita dan buat file EditProductForm.jsx di folder products. Pembuatan komponen EditProductForm akan serupa dengan NewProductForm, kecuali beberapa perbedaan, yang akan kita bahas. Oleh karena itu, salin seluruh kode NewProductForm.jsx dan tempel ke file yang dibuat EditProductForm.jsx. Sekarang mari kita mulai secara berurutan.

Hapus impor nanoid, di sini kita tidak perlu menghasilkan id. Ganti impor productAdded dengan productUpdated, karena di sini kita akan menggunakan action untuk memperbarui, bukan untuk menambahkan produk.

Selanjutnya ubah nama fungsi komponen kita dari NewProductForm menjadi EditProductForm.

Sebelum kita membuat local state di fungsi EditProductForm untuk name, desc, price dan amount, mari tambahkan beberapa baris kode. Seperti yang telah kami sebutkan sebelumnya, di sini kita tidak perlu menghasilkan id. Sekarang tugas kita adalah mendapatkannya dari data produk yang akan diubah. Kita sudah pernah melakukannya saat membuat halaman terpisah untuk produk. Jadi, dapatkan id dengan bantuan hook useParams, kemudian temukan produk yang kita butuhkan, menggunakan hook useSelector (jangan lupa impor kedua hook di awal file):

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

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

Setelah itu ubah blok deklarasi local state. Sekarang kita perlu menetapkan data produk yang didapat dari store sebagai nilai awal. Berikut tampilan state pertama, ubah tiga sisanya sendiri:

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

Setelah menetapkan variabel untuk useDispatch mari tambahkan satu baris kode lagi kali ini untuk hook useNavigate. Kita akan menggunakannya untuk kembali ke halaman produk, ketika pengguna menyimpan perubahan yang dimasukkan dalam form:

const navigate = useNavigate()

Juga impor hook ini di awal file:

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

Selanjutnya kita memiliki handler untuk field input. Dan setelahnya kita perlu menyesuaikan fungsi onSaveProductClick. Sekarang di dalamnya saat klik kita akan mengirim action productUpdated dengan id yang didapat dan data yang diubah dalam bentuk objek. Setelahnya tambahkan navigate kita, untuk beralih ke halaman produk yang diubah:

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

Tinggal mencari baris berikut di markup yang dikembalikan:

<h2>Add a New Product</h2>

Dan ganti dengan:

<h2>Edit Product</h2>

Buka aplikasi siswa Anda. Buat file EditStudentForm.jsx serupa dengan NewStudentForm.jsx. Masukkan perubahan ke dalamnya, seperti yang ditunjukkan dalam pelajaran.