⊗jsrxPmWFRSD 14 of 57 menu

Добивање на податоци од store во компонента во Redux

На оваа лекција ќе ги прикажеме податоците од store во React компонента.

Да ја отвориме нашата апликација со продукти, да влеземе во папката parts/products и да создадеме во неа датотека ProductsList.jsx. За почеток да го импортираме во неа hook-от 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 со помош на hook-от useSelector, како што е опишано во лекцијата. Прикажете ги сите полиња со информации за студентите од state-от, користејќи map.

Импортирајте го добиениот компонент StudentsList во root.jsx и прикажете го на главната страница. Погрижете се, дека сите информации за студентите се прикажани на екранот.

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