Mendapatkan Data dari Store di Komponen Redux
Pada sesi ini, kita akan menampilkan data dari store di komponen React.
Buka aplikasi produk kita, masuk
ke folder parts/products dan buat di dalamnya
file ProductsList.jsx. Untuk memulainya, impor
hook useSelector ke dalamnya, yang akan digunakan
untuk mendapatkan data dari store:
import { useSelector } from 'react-redux'
Sekarang mari kita dapatkan produk dari store.
Fungsi selector tidak akan kita buat secara terpisah,
kita akan tulis kodenya langsung di parameter untuk
useSelector:
export const ProductsList = () => {
const products = useSelector((state) => state.products)
}
Kemudian kita akan menampilkan produk dengan cara standar
di dalam tubuh fungsi ProductsList setelah
baris dengan pengambilan 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 ini kita akan menampilkan dispProducts dalam
markup berikut:
return (
<div>
<h2>Products</h2>
{dispProducts}
</div>
)
Sekarang tinggal menampilkan daftar
produk kita di halaman utama. Buka
file root.jsx dan perbaiki judulnya:
<h2>This is my first Redux app!</h2>
Menjadi:
<h2>My Products App</h2>
Kemudian impor komponen
ProductsList ke dalam file:
import { ProductsList } from '../parts/products/ProductsList'
Dan sisipkan ke dalam div dengan id main-page
tepat setelah tag penutup hr:
<ProductsList />
Jalankan aplikasi kita. Daftar kita yang berisi dua produk berhasil ditampilkan di halaman utama.
Buka aplikasi Anda dengan data mahasiswa.
Buat file StudentsList.jsx di folder
students.
Dapatkan data mahasiswa dari store menggunakan
hook useSelector, seperti yang dijelaskan dalam pelajaran.
Tampilkan semua field dengan informasi tentang
mahasiswa dari state, dengan menggunakan
map.
Impor komponen yang telah dibuat
StudentsList ke dalam root.jsx dan
tampilkan di halaman utama. Pastikan
semua informasi tentang mahasiswa
ditampilkan di layar.