Дар Redux аз store ба компонент додаҳо гирифтан

Дар ин машғулият мо додаҳоро аз store дар компоненти React бароем.

Барномаи мо бо маҳсулотро кушода, ба folder parts/products дохил шавед ва дар он файли ProductsList.jsx эҷод кунед. Барои оғоз hook-и useSelector-ро ба он import кунед, ки бо ёрии он аз store додаҳо мегирем:

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

Ҳоло биёед маҳсулотро аз store гирем. Функсияи selector-ро мо ҷудо намесозем, коди онро дар параметри барои 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>Price: {product.price}</p>
    <p>Amount: {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-ро ба файл import кунед:

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

Ва онро ба div бо id main-page фавран пас аз теги басташавандаи hr гузоред:

app/root.jsx<ProductsList />

Барномаи худро меофарем. Рӯйхати мо аз ду маҳсулот бомуваффақият дар саҳифаи асосӣ бароида шуд.