หน้าสำหรับสินค้าใน Redux

ในบทเรียนนี้ เราจะสร้างหน้าแยกต่างหาก เพื่อแสดงข้อมูลเกี่ยวกับสินค้าเฉพาะ

เปิดแอปพลิเคชันสินค้าของเราและในโฟลเดอร์ products สร้างไฟล์ ProductPage.jsx ตามที่ คุณจำได้ สินค้าแต่ละรายการของเรามี id ที่ไม่ซ้ำกัน ขอบคุณ id นี้ เราจะสามารถสร้าง URL หน้าที่ไม่ซ้ำกันสำหรับแต่ละสินค้าได้ ตามธรรมเนียมจะหน้าตาเช่นนี้: /products/id123 และ id จะอยู่ใน ส่วนที่เปลี่ยนแปลงได้ (ส่วนเส้นทางเองเราจะจัดการ ในภายหลัง)

ดังนั้น มาเริ่มกันที่ ProductPage.jsx สร้าง คอมโพเนนต์เปล่า ProductPage:

products/ProductPage.jsxexport const ProductPage = () => {}

สิ่งแรกที่เราจะทำที่นี่ - ใช้ Hook useParams เพื่อดึงส่วนที่เปลี่ยนแปลงได้ ของ URL สำหรับหน้าสินค้าที่ เราอยู่:

products/ProductPage.jsxexport const ProductPage = () => {
  let params = useParams()
  const { productId } = params
}

จากนั้น ตาม id ที่ได้รับ เราจะค้นหา สินค้าที่ต้องการใน slice products ใน store โดยใช้ Hook ที่เราคุ้นเคยแล้ว useSelector:

products/ProductPage.jsxconst product = useSelector((state) =>
  state.products.find((product) => product.id === productId)
)

อย่าลืมนำเข้า Hook ทั้งสองในไฟล์:

products/ProductPage.jsximport { useSelector } from 'react-redux'
import { useParams } from 'react-router-dom'

หากสินค้าที่เราต้องการไม่มี (เช่น ผู้ใช้ป้อนที่อยู่ ไม่ถูกต้อง) เราจะแสดงข้อมูลเกี่ยวกับเรื่องนี้ บนหน้าจอ ในขั้นตอนนี้โค้ดสำหรับคอมโพเนนต์ ProductPage ควรมีลักษณะดังนี้:

products/ProductPage.jsxexport const ProductPage = () => {
  let params = useParams()
  const { productId } = params

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

  if (!product) {
    return <p>ไม่มีสินค้าดังกล่าว</p>
  }
}

และสิ่งที่เหลือคือเพียงแสดง ข้อมูลสินค้าที่ได้รับในการออกแบบ:

products/ProductPage.jsxreturn (
  <div>
    <h2>{product.name}</h2>
    <p>รายละเอียด: {product.desc}</p>
    <p>ราคา: {product.price}</p>
    <p>จำนวน: {product.amount}</p>
  </div>
)