Lägga till information om säljare i Redux

Vi har tidigare talat om att våra produkter faktiskt läggs till i applikationen av säljare. Låt oss när vi lägger till en ny produkt visa information om säljaren.

Öppna vår produktapplikation, och i den filen productsSlice.js. Låt oss skicka in ytterligare en parameter i prepare, vi kallar den sellerId och sätter den sedan för payload i actionen. Nu kommer vår koddel för prepare att se ut så här:

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

Nu behöver vi göra en rad ändringar i filen med formuläret för att lägga till produkt NewProductForm.jsx. Låt oss först lägga till ytterligare ett lokalt state för säljarens id:

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

Sedan, efter deklarationen av variabeln dispatch för useDispatch, lägger vi till kod för att hämta säljarslicen från statet med hjälp av hooken useSelector:

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

I hanterarna för inmatningsfälten lägger vi till en till:

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

Vi justerar onSaveProductClick genom att lägga till sellerId för actionen productAdded:

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