Henting av data fra store i en komponent i Redux

I denne økten vil vi vise data fra store i en React-komponent.

La oss åpne applikasjonen vår med produkter, gå inn i mappen parts/products og opprette en fil ProductsList.jsx i den. Til å begynne med importerer vi hooken useSelector, som vi skal bruke for å hente data fra store:

import { useSelector } from 'react-redux'

La oss nå hente produktene fra store. Vi skal ikke opprette selektorfunksjonen separat, vi skriver koden dens direkte i parameteret til useSelector:

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

Deretter viser vi produktene på standard måte i kroppen av funksjonen ProductsList etter linjen der produktene hentes, ved å bruke 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>
))

Og nedenfor viser vi dispProducts i følgende oppsett:

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

Nå gjenstår det bare å vise produktlisten vår på hovedsiden. La oss åpne filen root.jsx og endre overskriften:

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

Til følgende:

<h2>My Products App</h2>

Deretter importerer vi komponenten ProductsList i filen:

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

Og plasserer den i diven med id main-page rett etter den avsluttende taggen hr:

<ProductsList />

La oss starte applikasjonen vår. Listen vår med to produkter ble vist på hovedsiden.

Åpne applikasjonen deres med studenter. Opprett en fil StudentsList.jsx i mappen students.

Hent studentene fra store ved hjelp av hooken useSelector, som beskrevet i leksjonen. Vis alle feltene med informasjon om studentene fra staten, ved å bruke map.

Importer den opprettede komponenten StudentsList i root.jsx og vis den på hovedsiden. Forsikre dere om at all informasjon om studentene blir vist på skjermen.