Adatok lekérése a store-ból komponensben Redux-ban

Ezen az órán a store-ból származó adatokat fogjuk megjeleníteni egy React komponensben.

Nyissuk meg a termékekkel kapcsolatos alkalmazásunkat, lépjünk be a parts/products mappába és hozzunk létre benne egy ProductsList.jsx fájlt. Kezdetként importáljuk be a useSelector hook-ot, amely segítségével adatokat fogunk kérni a store-ból:

import { useSelector } from 'react-redux'

Most pedig kérjük le a termékeket a store-ból. A szelektor függvényt nem hozzuk létre külön, írjuk be a kódját közvetlenül a useSelector paraméterébe:

export const ProductsList = () => {
	const products = useSelector((state) => state.products)
}

Ezután a termékeket szabványos módon jelenítjük meg a ProductsList függvény törzsében, a termékek lekérése után, a map használatával:

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>
))

Alul pedig jelenítsük meg a dispProducts-t a következő HTML szerkezetben:

return (
	<div>
		<h2>Products</h2>
		{dispProducts}
	</div>
)

Már csak a terméklistánk megjelenítése van hátra a főoldalon. Nyissuk meg a root.jsx fájlt és módosítsuk a címet:

<h2>This is my first Redux app!</h2>

Erre:

<h2>My Products App</h2>

Ezután importáljuk a fájlba a ProductsList komponenst:

import { ProductsList } from '../parts/products/ProductsList'

És helyezzük el a main-page azonosítójú div-ben, közvetlenül a hr záró tagje után:

<ProductsList />

Indítsuk el az alkalmazásunkat. A két termékből álló listánk sikeresen megjelent a főoldalon.

Nyissa meg a diákokkal kapcsolatos alkalmazását. Hozzon létre egy StudentsList.jsx fájlt a students mappában.

Kérje le a diákokat a store-ból a useSelector hook segítségével, ahogyan azt a leckében leírtuk. Jelenítse meg a diákokkal kapcsolatos összes információmezőt az állapotból, a map használatával.

Importálja a létrehozott StudentsList komponenst a root.jsx fájlba és jelenítse meg a főoldalon. Győződjön meg róla, hogy a diákokkal kapcsolatos összes információ megjelent a képernyőn.