Шматразовае выкарыстанне даных са слайса ў Redux

На мінулым заняткі мы дадалі да формы для дадання прадукту яшчэ адно поле з выпадальным спісам для выбару прадаўца, які яго выкладвае. Выкажам здагадку, цяпер нам таксама трэба вывесці гэтую інфармацыю яшчэ ў некалькіх месцах прыкладання. Для гэтага мы не будзем кожны раз дубляваць код, а проста створым асобны кампанент, у якім будзем здабываць даныя са слайса і выводзіць іх у тых частках прыкладання, дзе нам трэба.

Адчынём наша прыкладанне з прадуктамі. Давайце цяпер у папцы products створым яшчэ файл SellerOfProd.jsx. Для пачатку імпартуем хук useSelector, з дапамогай якого мы будзем атрымліваць слайс з патрэбным прадуктам:

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

Затым здабудзем з store патрэбны прадукт па id прадаўца, які мы будзем перадаваць нашаму новаму кампаненту ў пропсах:

products/SellerOfProd.jsxexport const SellerOfProd = ({ sellerId }) => {
  const seller = useSelector((state) =>
    state.sellers.find((seller) => seller.id === sellerId)
  )
}

І ў выпадку, калі такі прадавец ёсць, мы будзем вяртаць яго назву, а калі няма, то вернем 'unknown':

products/SellerOfProd.jsxreturn <span>by {seller ? seller.name : 'unknown'}</span>

Давайце цяпер імпартуем наш новы кампанент у ProductsList.jsx і ўставім яго ў функцыі ProductsList адразу пасля загалоўка з назвай прадукту. Як бачыце, мы перадалі яму ў пропсах id:

products/ProductsList.jsx<SellerOfProd sellerId={product.seller} />

Цяпер, калі мы запусцім наша прыкладанне, дадамо новы прадукт і знойдзем яго ў спісе, то ўбачым, што ў яго з'явіўся прадавец, а ў прадуктаў, аўтаматычна дададзеных пры запуску прыкладання, будзе 'unknown'.

Невялікае адхіленне: калі ваш eslint у рэдактары VS Code наракае на sellerId, а прыкладанне працуе, то можаце пакуль праігнараваць гэта ці адчыніць файл .eslintrc.cjs вашага прыкладання і ў rules дадаць "react/prop-types": "off".

Само сабой разумеецца, што мы б хацелі дадаць інфармацыю пра прадаўца і на старонцы прадукту. Для гэтага ўставім у вёрстцы ProductPage пасля загалоўка з назвай прадукту зноў гэты радок і праверым, што ўсё працуе:

products/ProductPage.jsx<SellerOfProd sellerId={product.seller} />