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:
import { 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:
export 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:
const 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:
return (
<div>
<h2>Products</h2>
{dispProducts}
</div>
)
Sekarang tinggal memaparkan senarai
produk kami di halaman utama. Buka
fail root.jsx dan betulkan tajuk:
<h2>This is my first Redux app!</h2>
Kepada yang berikut:
<h2>My Products App</h2>
Kemudian import komponen
ProductsList ke dalam fail:
import { ProductsList } from '../parts/products/ProductsList'
Dan masukkan ke dalam div dengan id main-page
tepat selepas tag penutup hr:
<ProductsList />
Jalankan aplikasi kami. Senarai kami yang mengandungi dua produk berjaya dipaparkan di halaman utama.
Buka aplikasi anda dengan pelajar.
Buat fail StudentsList.jsx dalam folder
students.
Dapatkan pelajar dari store menggunakan
hook useSelector, seperti yang diterangkan dalam pelajaran.
Paparkan semua medan dengan maklumat
tentang pelajar dari state, dengan menggunakan
map.
Import komponen yang diperoleh
StudentsList ke dalam root.jsx dan
paparkannya di halaman utama. Pastikan
semua maklumat tentang pelajar
dipaparkan di skrin.