Տվյալներն store-ից կոմպոնենտում ստանալը Redux-ում

Այս դասին մենք կարտահանենք տվյալները store-ից React կոմպոնենտում։

Բացենք մեր ապրանքների հավելվածը, մտնենք parts/products պանակի մեջ և ստեղծենք դրա մեջ ProductsList.jsx ֆայլը։ Սկզբից ներմուծենք դրա մեջ useSelector հուկը, որի օգնությամբ կստանանք տվյալներ store-ից։

parts/products/ProductsList.jsximport { useSelector } from 'react-redux'

Հիմա եկեք ստանանք ապրանքները store-ից։ Ֆունկցիա-սելեկտորը առանձին չենք ստեղծի, կգրենք դրա կոդը անմիջապես useSelector-ի պարամետրի մեջ։

parts/products/ProductsList.jsxexport const ProductsList = () => {
  const products = useSelector((state) => state.products)
}

Ապա մենք կարտահանենք ապրանքները ստանդարտ եղանակով ProductsList ֆունկցիայի մարմնում ապրանքներ ստանալու տողից հետո, օգտագործելով map մեթոդը։

parts/products/ProductsList.jsxconst 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-ը հետևյալ վերստում։

parts/products/ProductsList.jsxreturn (
  <div>
    <h2>Ապրանքներ</h2>
    {dispProducts}
  </div>
)

Հիմա մնաց է ցուցադրել մեր ապրանքների ցուցակը գլխավոր էջում։ Բացենք root.jsx ֆայլը և ուղղենք վերնագիրը։

app/root.jsx<h2>This is my first Redux app!</h2>

Հետևյալի։

app/root.jsx<h2>Իմ Ապրանքների Հավելվածը</h2>

Ապա ներմուծենք ֆայլի մեջ ProductsList կոմպոնենտը։

app/root.jsximport { ProductsList } from '../parts/products/ProductsList'

Եվ կտեղադրենք այն main-page աիդի ունեցող դիվի մեջ անմիջապես hr փակվող թեգից հետո։

app/root.jsx<ProductsList />

Գործարկենք մեր հավելվածը։ Մեր երկու ապրանքների ցուցակը հաջողությամբ արտահանվեց գլխավոր էջում։