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

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

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

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

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

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

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

products/ProductPage.jsximport { Link } from 'react-router-dom'

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