# Получение данных из 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` и выведите его на главной страничке. Убедитесь, что вся информация о студентах отобразилась на экране.

← →
↑