Извличане на данни от 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 и
го изведете на главната страница. Уверете се,
че цялата информация за студентите
се показва на екрана.