Redux-те store-дан компоненттен дерек алу

Осы сабақта біз store-дан деректерді React компонентіне шығарамыз.

Өнімдеріміз бар қолданбаны ашып, parts/products бумасына кіріп, онда ProductsList.jsx файлын құрайық. Алдымен оған store-дан дерек алу үшін қажет болатын useSelector хукін импорттаймыз:

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>Бұл менің тұңғыш Redux қолданбам!</h2>

Мынауға:

app/root.jsx<h2>Менің Өнімдер Қолданбам</h2>

Содан кейін файлға ProductsList компонентін импорттаймыз:

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

Және оны main-page айдисі бар дивке, hr жабатын тегінен кейін бірден енгіземіз:

app/root.jsx<ProductsList />

Қолданбамызды іске қосамыз. Біздің екі өнімнен тұратын тізіміміз басты бетте сәтті шықты.