Получение данных из 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'
И вставим его в див с айди main-page
сразу после закрывающего тега hr:
<ProductsList />
Запускаем наше приложение. Наш список из двух продуктов успешно вывелся на главной страничке.
Откройте ваше приложение со студентами.
Создайте файл StudentsList.jsx в папке
students.
Получите студентов из store с помощью
хука useSelector, как описано в уроке.
Отобразите все поля с информацией о
студентах из стейта, воспользовавшись
map.
Импортируйте полученный компонент
StudentsList в root.jsx и
выведите его на главной страничке. Убедитесь,
что вся информация о студентах
отобразилась на экране.