Halaman untuk Produk di Redux

Pada pelajaran ini, kita akan membuat halaman terpisah untuk menampilkan informasi tentang produk tertentu.

Buka aplikasi kita dengan produk-produk dan di folder products buat file ProductPage.jsx. Seperti yang Anda ingat, setiap produk kita memiliki id yang unik. Berkat id ini kita dapat menghasilkan URL halaman yang unik untuk setiap produk. Secara tradisional, itu akan terlihat seperti: /products/id123. Dan id akan terkandung dalam bagian dinamisnya (kita akan membahas rute itu sendiri beberapa saat kemudian).

Jadi, mari di ProductPage.jsx kita buat komponen kosong ProductPage:

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

Hal pertama yang akan kita lakukan di sini adalah menggunakan hook useParams untuk mengambil bagian dinamis dari URL untuk halaman produk, di mana kita berada:

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

Selanjutnya, berdasarkan id yang didapat, kita akan mencari produk yang dibutuhkan di slice products di store, menggunakan hook yang sudah kita kenal useSelector:

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

Jangan lupa untuk mengimpor kedua hook ke dalam file:

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

Jika produk yang kita butuhkan tidak ditemukan (misalnya, pengguna memasukkan alamat yang tidak benar), maka kita akan menampilkan informasi tentang hal itu pada layar. Pada langkah ini, kode untuk komponen ProductPage harus terlihat 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>Tidak ada produk seperti itu</p>
  }
}

Dan tinggal menampilkan data produk yang didapat dalam tampilan:

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