Trang chỉnh sửa sản phẩm trong trình duyệt với Redux

Ở bài học trước, chúng ta đã tạo một biểu mẫu để chỉnh sửa sản phẩm. Hãy gắn một tuyến đường cho nó.

Hãy mở ứng dụng sản phẩm của chúng ta, và trong đó mở tệp App.jsx và thêm một đối tượng tuyến đường con nữa vào mảng cho thuộc tính children (đừng quên nhập khẩu EditProductForm):

{
	path: '/editProduct/:productId',
	element: <EditProductForm />,
},

Ngoài ra, để chuyển đến biểu mẫu chỉnh sửa, chúng ta cần tạo một liên kết. Để làm điều này, hãy mở ProductPage.jsx và đặt liên kết này trong phần giao diện được trả về sau đoạn văn cuối cùng với số lượng sản phẩm và trước thẻ div đóng:

<Link to={`/editProduct/${product.id}`} className="link-btn">
	edit
</Link>

Cũng nhập khẩu Link từ thư viện định tuyến:

import { Link } from 'react-router-dom'

Hãy khởi chạy ứng dụng của chúng ta và nhấp vào nút xem sản phẩm nào đó. Hãy thử chỉnh sửa nó và quay trở lại danh sách sản phẩm bằng cách nhấp vào liên kết 'Products' trong menu bên trái. Cũng trong Redux DevTools, bạn có thể thấy hành động mới productUpdated và xem các thay đổi của đối tượng sản phẩm trong store.

Hãy mở ứng dụng quản lý sinh viên của bạn. Trong tệp App.jsx, hãy thêm một tuyến đường con nữa để chỉnh sửa dữ liệu sinh viên.

Thêm phần tử Link vào giao diện trên trang thông tin sinh viên để chuyển đến trang chỉnh sửa dữ liệu của họ.

Khởi chạy ứng dụng của bạn, hãy thử chỉnh sửa dữ liệu của một sinh viên nào đó. Chú ý đến thanh địa chỉ trình duyệt khi bạn đang ở trang chỉnh sửa. Xem các thay đổi trong Redux DevTools của trình duyệt.