Pridanie informácií o predajcovi do Reduxu

Hovorili sme si o tom, že naše produkty sa do aplikácie pridávajú predajcami. Poďme pri pridávaní nového produktu zobraziť informácie o predajcovi.

Otvorte našu aplikáciu s produktmi, a v nej súbor productsSlice.js. Poďme odovzdať do prepare ešte jeden parameter, nazvime ho sellerId a nastavme ho následne pre payload akcie. Teraz náš kúsok kódu pre prepare bude takýto:

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

Teraz musíme vykonať rad zmien v súbore s formulárom na pridanie produktu NewProductForm.jsx. Najprv pridajme ďalší lokálny stav pre id predajcu:

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

Potom po deklarácii premennej dispatch pre useDispatch, pridajme kód na získanie slice predajcov zo stavu pomocou hooku useSelector:

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

Do handlerov pre vstupné polia pridajme ďalší:

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

Upravme onSaveProductClick, pridaním akcie productAdded ešte aj sellerId:

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