Halaman untuk Produk dalam Redux

Dalam pelajaran ini, kami akan membuat halaman berasingan untuk memaparkan maklumat tentang produk tertentu.

Buka aplikasi produk kami dan dalam folder products buat fail ProductPage.jsx. Seperti yang anda ingat, setiap produk kami mempunyai id yang unik. Berkat id ini, kami boleh menjana URL halaman yang unik untuk setiap produk. Secara tradisinya, ia akan kelihatan seperti: /products/id123. Dan id akan terkandung dalam bahagian dinamiknya (kami akan uruskan laluan itu tidak lama kemudian).

Jadi, mari dalam ProductPage.jsx kami cipta komponen kosong ProductPage:

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

Perkara pertama yang akan kami lakukan di sini ialah menggunakan hook useParams untuk menarik bahagian dinamik URL untuk halaman produk yang kami buka:

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

Seterusnya, dengan menggunakan id yang diperoleh, kami akan cari produk yang diperlukan dalam slice products dalam store, menggunakan hook yang sudah kami kenali useSelector:

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

Jangan lupa untuk import kedua-dua hook ke dalam fail:

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

Jika produk yang kami perlukan tidak ditemui (contohnya, pengguna memasukkan alamat yang tidak betul), maka kami akan memaparkan maklumat tentang perkara itu pada skrin. Pada langkah ini, kod untuk komponen ProductPage sepatutnya kelihatan seperti ini:

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>Tiada produk sedemikian</p>
  }
}

Dan kami hanya perlu memaparkan data produk yang diperoleh dalam markup:

products/ProductPage.jsxreturn (
  <div>
    <h2>{product.name}</h2>
    <p>Penerangan: {product.desc}</p>
    <p>Harga: {product.price}</p>
    <p>Kuantiti:{product.amount}</p>
  </div>
)