Gjenbruk av data fra en slice i Redux

I forrige forelesning la vi til et ekstra felt med en nedtrekksliste for å velge selger som legger den ut i skjemaet for å legge til produkt. La oss anta at vi nå også må vise denne informasjonen på flere steder i applikasjonen. For å gjøre dette vil vi ikke duplisere koden hver gang, men bare lage en egen komponent der vi henter data fra slicen og viser dem i de delene av applikasjonen der vi trenger det.

La oss åpne produktapplikasjonen vår. La oss nå i mappen products opprette en ny fil SellerOfProd.jsx. Til å begynne med, la oss importere hooken useSelector, som vi skal bruke for å hente slicen med det nødvendige produktet:

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

Deretter henter vi det nødvendige produktet fra store ved hjelp av selgerens id, som vi skal sende til vår nye komponent i props:

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

Og hvis en slik selger finnes, vil vi returnere navnet deres, og hvis ikke, returnerer vi 'unknown':

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

La oss nå importere vår nye komponent til ProductsList.jsx og sette den inn i funksjonen ProductsList rett etter overskriften med produktnavnet. Som du ser, sendte vi id-en til den i props:

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

Nå, hvis vi starter applikasjonen vår, legger til et nytt produkt og finner det i listen, vil vi se at det har fått en selger, og for produktene som ble lagt til automatisk ved oppstart av applikasjonen, vil det stå 'unknown'.

Et lite sidesprang: Hvis eslint i redigeringsprogrammet VS Code klager på sellerId, men applikasjonen fungerer, kan du ignorere det for nå, eller åpne filen .eslintrc.cjs i applikasjonen din og i rules legge til "react/prop-types": "off".

Det er selvsagt at vi også vil legge til informasjon om selgeren på produktsiden. For å gjøre dette, setter vi inn i koden til ProductPage etter overskriften med produktnavnet denne linjen igjen og sjekker at alt fungerer:

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