Borang untuk Mengedit Data dalam Redux

Sekarang kita mempunyai reducer untuk mengubah data dalam store. Dalam pelajaran ini, kita akan mencipta borang yang membolehkan kita mengedit data produk.

Mari buka aplikasi produk kita dan cipta fail dalam folder products EditProductForm.jsx. Penciptaan komponen EditProductForm adalah serupa dengan NewProductForm, kecuali beberapa perbezaan yang akan kita tekankan. Oleh itu, salin sepenuhnya kod NewProductForm.jsx dan tampalkannya dalam fail yang dicipta EditProductForm.jsx. Sekarang kita mulakan langkah demi langkah.

Keluarkan import nanoid, di sini kita tidak perlu menjana id. Gantikan import productAdded dengan productUpdated, kerana di sini kita akan menggunakan action untuk mengemaskini, bukan untuk menambah produk.

Seterusnya tukar nama fungsi komponen kita daripada NewProductForm kepada EditProductForm.

Sebelum kita mewujudkan state tempatan dalam fungsi EditProductForm untuk name, desc, price dan amount, mari kita masukkan beberapa baris kod lagi. Seperti yang telah disebut sebelum ini, di sini kita tidak perlu menjana id. Sekarang tugas kita adalah untuk mendapatkannya daripada data produk yang ingin diubah. Kita telah melakukannya semasa mencipta halaman berasingan untuk produk. Jadi, dapatkan id menggunakan hook useParams, dan kemudian cari produk yang kita perlukan, menggunakan hook useSelector (jangan lupa import kedua-dua hook pada permulaan fail):

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

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

Selepas ini, ubah blok dengan pengisytiharan state tempatan. Sekarang kita perlu menetapkan data produk yang diperoleh daripada store sebagai nilai awal. Ini adalah rupa state pertama, ubah suai tiga yang selebihnya sendiri:

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

Selepas menetapkan pembolehubah untuk useDispatch mari kita masukkan satu baris kod lagi kali ini untuk hook useNavigate. Kita akan menggunakannya untuk kembali ke halaman produk, apabila pengguna menyimpan perubahan yang dibuat dalam borang:

const navigate = useNavigate()

Juga import hook ini pada permulaan fail:

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

Seterusnya kita mempunyai pengendali untuk medan input. Dan selepas mereka, kita perlu membetulkan fungsi onSaveProductClick. Sekarang di dalamnya, apabila diklik, kita akan menghantar action productUpdated dengan id yang diperoleh dan data yang diubah dalam bentuk objek. Selepas itu, tambahkan navigate kita, untuk pergi ke halaman produk yang telah diubah:

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

Hanya tinggal dalam JSX yang dipulangkan cari baris:

<h2>Add a New Product</h2>

Dan gantikannya dengan:

<h2>Edit Product</h2>

Buka aplikasi pelajar anda. Cipta fail EditStudentForm.jsx mengikut analogi dengan NewStudentForm.jsx. Masukkan perubahan ke dalamnya, seperti yang ditunjukkan dalam pelajaran.