Tilføjelse af oplysninger om sælger i Redux

Vi har tidligere talt om, at vores produkter faktisk tilføjes til applikationen af sælgere. Lad os ved tilføjelse af et nyt produkt vise oplysninger om sælgeren.

Åbn vores applikation med produkter, og i den filen productsSlice.js. Lad os overføre til prepare en ekstra parameter, vi kalder den sellerId og sætter den derefter for payload handlingen. Nu vil vores stykke kode for prepare se sådan ud:

products/productsSlice.jsprepare(name, desc, price, amount, sellerId) {
  return {
    payload: {
      id: nanoid(),
      name,
      desc,
      price,
      amount,
      seller: sellerId,
    },
  }
},

Nu er vi nødt til at foretage en række ændringer i filen med formularen til tilføjelse af produkt NewProductForm.jsx. Til at starte med tilføjer vi endnu en lokal state for sælgerens id:

products/NewProductForm.jsxconst [sellerId, setSellerId] = useState('')

Derefter efter deklarationen af variablen dispatch for useDispatch, tilføjer vi kode for at hente sælger-slice'et fra staten ved hjælp af hook'et useSelector:

products/NewProductForm.jsxconst sellers = useSelector((state) => state.sellers)

Til håndteringerne for inputfelter tilføjer vi endnu en:

products/NewProductForm.jsxconst onSellerChanged = (e) => setSellerId(e.target.value)

Vi justerer onSaveProductClick ved at tilføje for handlingen productAdded også sellerId:

products/NewProductForm.jsxdispatch(productAdded(name, desc, price, amount, sellerId))