Aggiunta di informazioni sul venditore in Redux

Avevamo parlato del fatto che i nostri prodotti vengono effettivamente aggiunti all'applicazione dai venditori. Inseriamo le informazioni sul venditore quando aggiungiamo un nuovo prodotto.

Apriamo la nostra applicazione di prodotti, e in essa il file productsSlice.js. Trasmettiamo in prepare un ulteriore parametro, chiamiamolo sellerId e impostiamolo poi per il payload dell'azione. Ora il nostro frammento di codice per prepare sarà così:

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

Ora dobbiamo apportare una serie di modifiche al file con il modulo per l'aggiunta del prodotto NewProductForm.jsx. Per iniziare, aggiungiamo un altro stato locale per l'id del venditore:

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

Poi, dopo la dichiarazione della variabile dispatch per useDispatch, aggiungiamo il codice per ottenere la slice dei venditori dallo stato usando l'hook useSelector:

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

Aggiungiamo un altro gestore ai gestori dei campi di input:

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

Modifichiamo onSaveProductClick, aggiungendo sellerId all'azione productAdded:

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