Mendapatkan Data dari Store dalam Komponen di Redux

Dalam sesi ini, kita akan memaparkan data dari store dalam komponen React.

Buka aplikasi produk kami, masuk ke folder parts/products dan buat fail ProductsList.jsx di dalamnya. Mula-mula, import hook useSelector ke dalamnya, yang akan digunakan untuk mendapatkan data dari store:

parts/products/ProductsList.jsximport { useSelector } from 'react-redux'

Sekarang mari kita dapatkan produk dari store. Kami tidak akan mencipta fungsi pemilih secara berasingan, tetapi akan menulis kodnya terus dalam parameter untuk useSelector:

parts/products/ProductsList.jsxexport const ProductsList = () => {
  const products = useSelector((state) => state.products)
}

Kemudian kami akan memaparkan produk dengan cara biasa dalam badan fungsi ProductsList selepas baris mendapatkan produk, menggunakan map:

parts/products/ProductsList.jsxconst dispProducts = products.map((product) => (
  <div key={product.id}>
    <h3>{product.name}</h3>
    <p>{product.desc.substring(0, 100)}</p>
    <p>Price: {product.price}</p>
    <p>Amount: {product.amount}</p>
  </div>
))

Dan di bawah, paparkan dispProducts dalam markup berikut:

parts/products/ProductsList.jsxreturn (
  <div>
    <h2>Products</h2>
    {dispProducts}
  </div>
)

Sekarang tinggal memaparkan senarai produk kami di halaman utama. Buka fail root.jsx dan betulkan tajuk:

app/root.jsx<h2>This is my first Redux app!</h2>

Kepada yang berikut:

app/root.jsx<h2>My Products App</h2>

Kemudian import komponen ProductsList ke dalam fail:

app/root.jsximport { ProductsList } from '../parts/products/ProductsList'

Dan masukkan ke dalam div dengan id main-page tepat selepas tag penutup hr:

app/root.jsx<ProductsList />

Jalankan aplikasi kami. Senarai kami yang mengandungi dua produk berjaya dipaparkan di halaman utama.