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