Andmete hankimine store'ist komponendis Reduxis

Sellel tunnil kuvame andmed store'ist React komponendis.

Avame oma tooterakenduse, läheme kausta parts/products ja loome sinna faili ProductsList.jsx. Alustuseks impordime sinna hooki useSelector, mille abil hankime andmed store'ist:

import { useSelector } from 'react-redux'

Nüüd hankime tooted store'ist. Funktsiooni-selektorit me ei loo eraldi, kirjutame selle koodi kohe parameetris useSelector jaoks:

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

Seejärel kuvame tooted standardsel viisil funktsiooni ProductsList kehas pärast tooteid hankivat rida, kasutades map:

const dispProducts = products.map((product) => (
	<div key={product.id}>
		<h3>{product.name}</h3>
		<p>{product.desc.substring(0, 100)}</p>
		<p>Hind: {product.price}</p>
		<p>Kogus: {product.amount}</p>
	</div>
))

Ja allpool kuvame dispProducts järgmises visandis:

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

Nüüd jääb üle kuvada meie toodete nimekiri pealehel. Avame faili root.jsx ja muudame pealkirja:

<h2>See on minu esimene Redux rakendus!</h2>

Järgmiseks:

<h2>Minu Tooted Rakendus</h2>

Seejärel impordime faili komponendi ProductsList:

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

Ja sisestame selle div-i id-ga main-page kohe pärast sulgevat tag-i hr:

<ProductsList />

Käivitame oma rakenduse. Meie nimekiri kahest tootest kuvati pealehel edukalt.

Avage oma õpilaste rakendus. Looge fail StudentsList.jsx kausta students.

Hankige õpilased store'ist kasutades hooki useSelector, nagu on kirjeldatud tunnis. Kuvage kõik väljad koos õpilaste infoga state'ist, kasutades map.

Importige saadud komponent StudentsList faili root.jsx ja kuvage see pealehel. Veenduge, et kõik õpilaste kohta käiv info kuvatakse ekraanil.