Добивање на податоци од 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 и
прикажете го на главната страница. Погрижете се,
дека сите информации за студентите
се прикажани на екранот.