Duomenų gavimas iš store komponente Redux

Šioje pamokoje mes atvaizduosime duomenis iš store React komponente.

Atidarykime mūsų produktų aplikaciją, eikime į aplanką parts/products ir jame sukurkime failą ProductsList.jsx. Pirmiausia importuokime jame hook'ą useSelector, kurio pagalba gausime duomenis iš store:

import { useSelector } from 'react-redux'

Dabar gaukime produktus iš store. Funkciją-selektoriumi mes nesukursime atskirai, įrašysime jos kodą iškart parametre for useSelector:

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

Tada mes atvaizduosime produktus standartiniu būdu funkcijos ProductsList kūne po eilutės su produktų gavimu, naudodami 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>
))

O žemiau atvaizduokime dispProducts sekančioje struktūroje:

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

Dabar belieka atvaizduoti mūsų produktų sąrašą pagrindiniame puslapyje. Atidarykime failą root.jsx ir pakeiskime antraštę:

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

Į sekantį:

<h2>My Products App</h2>

Tada importuokime į failą komponentą ProductsList:

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

Ir įstatykime jį į div su id main-page iškart po uždaromojo tag'o hr:

<ProductsList />

Paleiskime mūsų aplikaciją. Mūsų sąrašas iš dviejų produktų sėkmingai atvaizdavosi pagrindiniame puslapyje.

Atidarykite jūsų studentų aplikaciją. Sukurkite failą StudentsList.jsx aplanke students.

Gaukite studentus iš store naudodami hook'ą useSelector, kaip aprašyta pamokoje. Atvaizduokite visus laukus su informacija apie studentus iš state, pasinaudoję map.

Importuokite gautą komponentą StudentsList į root.jsx ir atvaizduokite jį pagrindiniame puslapyje. Įsitikinkite, kad visa informacija apie studentus atvaizdavosi ekrane.