Տվյալներն 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>Գին՝ {product.price}</p>
<p>Քանակ՝ {product.amount}</p>
</div>
))
Իսկ ներքևում կարտահանենք dispProducts-ը հետևյալ
վերստում։
return (
<div>
<h2>Ապրանքներ</h2>
{dispProducts}
</div>
)
Հիմա մնաց է ցուցադրել մեր ապրանքների ցուցակը
գլխավոր էջում։ Բացենք
root.jsx ֆայլը և ուղղենք վերնագիրը։
<h2>This is my first Redux app!</h2>
Հետևյալի։
<h2>Իմ Ապրանքների Հավելվածը</h2>
Ապա ներմուծենք ֆայլի մեջ ProductsList կոմպոնենտը։
import { ProductsList } from '../parts/products/ProductsList'
Եվ կտեղադրենք այն main-page աիդի ունեցող դիվի մեջ
անմիջապես hr փակվող թեգից հետո։
<ProductsList />
Գործարկենք մեր հավելվածը։ Մեր երկու ապրանքների ցուցակը հաջողությամբ արտահանվեց գլխավոր էջում։
Բացեք ձեր ուսանողների հավելվածը։
Ստեղծեք StudentsList.jsx ֆայլը
students պանակում։
Ստացեք ուսանողներին store-ից օգտագործելով
useSelector հուկը, ինչպես նկարագրված է դասում։
Ցուցադրեք ուսանողների մասին ստեյթում եղած բոլոր դաշտերը՝
օգտագործելով map մեթոդը։
Ներմուծեք ստացված StudentsList կոմպոնենտը
root.jsx ֆայլի մեջ և
արտահանեք այն գլխավոր էջում։ Համոզվեք,
որ ուսանողների մասին բոլոր տեղեկությունները
ցուցադրվել են էկրանին։