Kry data uit store in komponent in Redux

In hierdie sessie sal ons data uit die store in 'n React-komponent vertoon.

Ons maak ons aansoek met produkte oop, gaan na die gids parts/products en skep daarin die lêer ProductsList.jsx. Eerstens, laai ons die hook useSelector in, wat ons sal gebruik om data uit die store te kry:

import { useSelector } from 'react-redux'

Kom ons kry nou die produkte uit die store. Ons sal nie die selekteerder-funksie apart skep nie, ons sal die kode direk in die parameter vir useSelector skryf:

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

Daarna sal ons die produkte op die standaard manier vertoon in die liggaam van die funksie ProductsList na die reël waar die produkte verkry is, deur gebruik te maak van map:

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

En hieronder wys ons dispProducts in die volgende opmaak:

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

Nou bly dit om ons lys produkte op die hoofblad te vertoon. Ons maak die lêer root.jsx oop en wysig die opskrif:

<h2>Hierdie is my eerste Redux-app!</h2>

Na die volgende:

<h2>My Produkte App</h2>

Laat ons dan die komponent ProductsList in die lêer inlaai:

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

En plaas dit in die div met id main-page onmiddellik na die sluitende tag hr:

<ProductsList />

Ons begin ons aansoek. Ons lys van twee produkte is suksesvol op die hoofblad vertoon.

Maak jou aansoek met studente oop. Skep die lêer StudentsList.jsx in die gids students.

Kry studente uit die store met behulp van die hook useSelector, soos beskryf in die les. Vertoon alle velde met inligting oor studente uit die staat deur gebruik te maak van map.

Laai die verkrygde komponent StudentsList in root.jsx in en vertoon dit op die hoofblad. Maak seker dat alle inligting oor die studente op die skerm vertoon word.