Myyjän tiedon lisääminen Reduxiin

Puhuimme siitä, että tuotteemme todellisuudessa lisäävät myyjät sovellukseen. Annetaan uuden tuotteen lisäämisessä näyttää myyjän tiedot.

Avataan tuotesovelluksemme, ja siellä tiedosto productsSlice.js. Annetaan kuljettaa prepare:een vielä yksi parametri, nimetään se sellerId ja asetetaan se edelleen payload:ille. Nyt meidän prepare:n koodinpala tulee olemaan tällainen:

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

Nyt meidän täytyy tehdä useita muutoksia tiedostoon lomakkeen kanssa tuotteen lisäämiseksi NewProductForm.jsx. Aluksi lisätään vielä yksi paikallinen tila myyjän id:lle:

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

Sitten muuttujan dispatch määrittelyn jälkeen useDispatch:lle, lisätään koodi myyjien siiven saamiseksi tilasta useSelector -hookin avulla:

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

Syötekenttien käsittelijöihin lisätään vielä yksi:

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

Korjataan onSaveProductClick, lisäämällä toimintoon productAdded myös sellerId:

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