⊗jsrxPmWFRSD 14 of 57 menu

Извличане на данни от store в компонент в Redux

В този урок ще изведем данни от store в React компонент.

Нека отворим нашето приложение с продукти, да влезем в папката parts/products и да създадем в нея файл ProductsList.jsx. Като начало ще импортираме в него хука useSelector, с чиято помощ ще получаваме данни от store:

import { useSelector } from 'react-redux'

Сега нека получим продуктите от store. Функцията-селектор няма да я създаваме отделно, ще напишем нейния код директно в параметъра за useSelector:

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

След това ще изведем продуктите по стандартен начин в тялото на функцията ProductsList след реда с получаването на продуктите, използвайки 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> ))

А по-долу ще изведем dispProducts в следващия верстаж:

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

Сега остава да покажем нашия списък продукти на главната страница. Нека отворим файла root.jsx и да поправим заглавието:

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

На следващото:

<h2>My Products App</h2>

След това импортираме във файла компонента ProductsList:

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

И ще го поставим в div с id main-page веднага след затварящия таг hr:

<ProductsList />

Стартираме нашето приложение. Нашият списък от два продукта беше успешно изведен на главната страница.

Отворете вашето приложение със студенти. Създайте файл StudentsList.jsx в папка students.

Вземете студентите от store с помощта на хука useSelector, както е описано в урока. Покажете всички полета с информация за студентите от стейта, като използвате map.

Импортирайте получения компонент StudentsList в root.jsx и го изведете на главната страница. Уверете се, че цялата информация за студентите се показва на екрана.

Български
AfrikaansAzərbaycanবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Ние използваме бисквитки за работата на сайта, анализ и персонализация. Обработката на данни се извършва в съответствие с Политика за поверителност.
приемам всички настройки отхвърляне