Dobijanje podataka iz store-a u komponenti u Redux-u

Na ovom času ćemo prikazati podatke iz store-a u React komponenti.

Otvorimo našu aplikaciju sa proizvodima, uđimo u folder parts/products i kreirajmo u njemu fajl ProductsList.jsx. Za početak uvežimo u njega hook useSelector, pomoću kojeg ćemo dobijati podatke iz store-a:

import { useSelector } from 'react-redux'

Sada hajde da dobijemo proizvode iz store-a. Funkciju-selektor nećemo kreirati odvojeno, napisaćemo njen kod odmah u parametru za useSelector:

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

Zatim ćemo prikazati proizvode standardnim načinom u telu funkcije ProductsList posle linije sa dobijanjem proizvoda, koristeći 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>
))

A ispod prikažimo dispProducts u sledećoj verstki:

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

Sada je ostalo da prikažemo naš spisak proizvoda na glavnoj stranici. Otvorimo fajl root.jsx i ispravimo naslov:

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

Na sledeći:

<h2>My Products App</h2>

Zatim uvežimo u fajl komponentu ProductsList:

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

I umetnimo ga u div sa ID-jem main-page odmah posle zatvarajućeg taga hr:

<ProductsList />

Pokrenimo našu aplikaciju. Naš spisak iz dva proizvoda uspešno se prikazao na glavnoj stranici.

Otvorite vašu aplikaciju sa studentima. Kreirajte fajl StudentsList.jsx u folderu students.

Dobijte studente iz store-a pomoću huka useSelector, kao što je opisano na času. Prikažite sva polja sa informacijama o studentima iz state-a, koristeći se map.

Uvezite dobijenu komponentu StudentsList u root.jsx i prikažite je na glavnoj stranici. Uverite se, da su se sve informacije o studentima prikazale na ekranu.