หน้าแก้ไขผลิตภัณฑ์ในเบราว์เซอร์ด้วย Redux

ในบทเรียนที่ผ่านมาเราได้สร้างฟอร์ม สำหรับแก้ไขผลิตภัณฑ์ มาติดตั้งเส้นทางสำหรับมันกัน

มาเปิดแอปพลิเคชันผลิตภัณฑ์ของเรา และในไฟล์ App.jsx นี้ให้เพิ่ม ออบเจ็กต์เส้นทางลูกอีกหนึ่งรายการใน อาร์เรย์สำหรับคุณสมบัติ children (อย่า ลืมนำเข้า EditProductForm):

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

นอกจากนี้สำหรับการไปยังฟอร์มแก้ไข เราต้องการสร้างลิงก์ เปิดไฟล์ ProductPage.jsx สำหรับการนี้และวางลิงก์นี้ใน การคืนค่า JSX หลังย่อหน้าสุดท้าย ที่มีจำนวนผลิตภัณฑ์และก่อนแท็กปิด div:

<Link to={`/editProduct/${product.id}`} className="link-btn">
	แก้ไข
</Link>

และนำเข้า Link จากไลบรารีเราเตอร์:

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

มาเริ่มต้นแอปพลิเคชันของเราและคลิกที่ปุ่ม ดูผลิตภัณฑ์บางรายการ ลอง แก้ไขมันและกลับมา สู่รายการผลิตภัณฑ์โดยคลิกที่ลิงก์ 'Products' ในเมนูด้านซ้าย และใน Redux DevTools คุณสามารถเห็น action ใหม่ productUpdated และดูการเปลี่ยนแปลง ของออบเจ็กต์ผลิตภัณฑ์ใน store ได้

เปิดแอปพลิเคชันนักเรียนของคุณ ในไฟล์ App.jsx เพิ่มเส้นทางลูกอีกหนึ่งรายการ สำหรับแก้ไขข้อมูลนักเรียน

เพิ่มองค์ประกอบ Link ใน JSX บนหน้าของนักเรียนสำหรับไปยัง หน้าแก้ไขข้อมูลของเขา

เริ่มต้นแอปพลิเคชันของคุณ ลอง แก้ไขข้อมูลของนักเรียนบางคน สังเกต แถบที่อยู่ของเบราว์เซอร์เมื่อคุณอยู่ บนหน้าแก้ไข ดูการ เปลี่ยนแปลงใน Redux DevTools ของเบราว์เซอร์