Trang dành cho sản phẩm trong Redux

Trong bài học này, chúng ta sẽ tạo một trang riêng để hiển thị thông tin về một sản phẩm cụ thể.

Hãy mở ứng dụng sản phẩm của chúng ta và trong thư mục products tạo tệp ProductPage.jsx. Như bạn nhớ, mỗi sản phẩm của chúng ta có một id duy nhất. Nhờ id này, chúng ta có thể tạo một URL trang duy nhất cho mỗi sản phẩm. Thông thường nó sẽ trông như: /products/id123. Và id sẽ được chứa trong phần động của nó (chúng ta sẽ giải quyết bản thân định tuyến muộn hơn một chút).

Vậy, hãy trong ProductPage.jsx tạo một thành phần trống ProductPage:

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

Điều đầu tiên chúng ta sẽ làm ở đây - sử dụng hook useParams để lấy phần động của URL cho trang sản phẩm mà chúng ta đang ở:

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

Tiếp theo, theo id nhận được, chúng ta sẽ tìm kiếm sản phẩm cần thiết trong slice products trong store, sử dụng hook quen thuộc useSelector:

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

Đừng quên import cả hai hook vào tệp:

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

Nếu sản phẩm chúng ta cần không có (ví dụ: người dùng nhập địa chỉ không chính xác), thì chúng ta sẽ hiển thị thông tin về điều này trên màn hình. Ở bước này, mã cho thành phần ProductPage phải trông như thế này:

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>Không có sản phẩm như vậy</p>
  }
}

Và chúng ta chỉ cần hiển thị dữ liệu sản phẩm nhận được trong phần giao diện:

products/ProductPage.jsxreturn (
  <div>
    <h2>{product.name}</h2>
    <p>Mô tả: {product.desc}</p>
    <p>Giá: {product.price}</p>
    <p>Số lượng:{product.amount}</p>
  </div>
)