⊗jsrxPmWFRSD 14 of 57 menu

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.

Indonesia
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Kami menggunakan cookie untuk operasi situs, analitik, dan personalisasi. Pemrosesan data dilakukan sesuai dengan Kebijakan Privasi.
terima semua atur tolak