Преузимање података из 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>Производи</h2>
		{dispProducts}
	</div>
)

Сада нам је остало само да прикажемо наш списак производа на главној страници. Отворимо фајл root.jsx и исправимо наслов:

<h2>This is my first Redux app!</h2>

На следећи:

<h2>Мoја апликација са производима</h2>

Затим увезимо у фајл компоненту ProductsList:

import { ProductsList } from '../parts/products/ProductsList'

И убацимо је у див са ид-ем main-page одмах после затварајућег тага hr:

<ProductsList />

Покренимо нашу апликацију. Наш списак од два производа је успешно приказан на главној страници.

Отворите вашу апликацију са студентима. Направите фајл StudentsList.jsx у фасцикли students.

Преузмите студенте из store-а користећи куку useSelector, како је описано у лекцији. Прикажите сва поља са информацијама о студентима из стања, користећи map.

Увезите добијену компоненту StudentsList у root.jsx и прикажите је на главној страници. Уверите се да су се све информације о студентима приказале на екрану.