Biểu mẫu chỉnh sửa dữ liệu trong Redux

Bây giờ chúng ta đã có reducer để thay đổi dữ liệu trong store. Trong bài học này, chúng ta sẽ tạo ra một biểu mẫu, với sự trợ giúp của nó chúng ta có thể chỉnh sửa dữ liệu sản phẩm.

Hãy mở ứng dụng sản phẩm của chúng ta và tạo trong thư mục products tệp EditProductForm.jsx. Việc tạo thành phần EditProductForm sẽ tương tự như NewProductForm, ngoại trừ một số khác biệt mà chúng ta sẽ dừng lại. Vì vậy, hãy sao chép toàn bộ mã NewProductForm.jsx và dán nó vào tệp đã tạo EditProductForm.jsx. Bây giờ hãy bắt đầu theo thứ tự.

Loại bỏ từ phần nhập khẩu nanoid, ở đây chúng ta không cần tạo id. Thay thế phần nhập khẩu productAdded bằng productUpdated, bởi vì ở đây chúng ta sẽ sử dụng action để cập nhật, chứ không phải để thêm sản phẩm.

Tiếp theo, hãy thay đổi tên hàm của thành phần chúng ta từ NewProductForm thành EditProductForm.

Trước khi chúng ta thiết lập các trạng thái cục bộ trong hàm EditProductForm cho name, desc, price và amount, hãy chèn thêm một vài dòng mã. Như chúng ta đã đề cập trước đó, ở đây chúng ta không cần tạo id. Bây giờ nhiệm vụ của chúng ta là lấy nó từ dữ liệu của sản phẩm đang được thay đổi. Chúng ta đã làm điều này khi tạo trang riêng cho sản phẩm. Vì vậy, hãy lấy id bằng hook useParams, và sau đó tìm sản phẩm chúng ta cần, sử dụng hook useSelector (đừng quên nhập khẩu cả hai hook ở đầu tệp):

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

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

Sau đó, hãy thay đổi khối khai báo trạng thái cục bộ. Bây giờ chúng ta cần đặt dữ liệu sản phẩm nhận được từ store làm giá trị ban đầu cho chúng. Đây là trạng thái đầu tiên sẽ trông như thế nào, hãy tự chuyển đổi ba trạng thái còn lại:

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

Sau khi chỉ định biến cho useDispatch, hãy thêm một dòng mã nữa lần này cho hook useNavigate. Chúng ta sẽ sử dụng nó để quay trở lại trang sản phẩm khi người dùng lưu các thay đổi đã thực hiện trong biểu mẫu:

const navigate = useNavigate()

Đồng thời nhập khẩu hook này ở đầu tệp:

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

Tiếp theo chúng ta có các trình xử lý cho các trường nhập liệu. Và sau chúng, chúng ta cần chỉnh sửa hàm onSaveProductClick. Bây giờ trong đó, khi nhấp chuột, chúng ta sẽ gửi action productUpdated với id đã nhận và dữ liệu đã thay đổi dưới dạng đối tượng. Sau đó, hãy thêm navigate của chúng ta để chuyển sang trang của sản phẩm đã được thay đổi:

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

Chỉ còn lại trong phần giao diện được trả về của chúng ta để tìm dòng:

<h2>Add a New Product</h2>

Và thay thế nó bằng:

<h2>Edit Product</h2>

Hãy mở ứng dụng sinh viên của bạn. Tạo tệp EditStudentForm.jsx tương tự như NewStudentForm.jsx. Hãy đưa vào đó những thay đổi như được hiển thị trong bài học.