⊗jsrxPmWFRSD 14 of 57 menu

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.

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