Müüja teabe lisamine Reduxis

Me rääkisime sellest, et meie tooted lisatakse rakendusse tegelikult müüjate poolt. Paneme uus toode lisades kuvama müüja teavet.

Avame oma tooterakenduse, ja selles faili productsSlice.js. Hakkame prepare-le edastama veel üht parameetrit, nimetame selle sellerId ja määrame selle seejärel ekseemli payload jaoks. Nüüd on meie prepare koodilõik selline:

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

Nüüd peame tegema mitmeid muudatusi failis toote lisamise vormiga NewProductForm.jsx. Alustuseks lisame veel ühe lokaalse oleku müüja id jaoks:

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

Seejärel pärast muutuja dispatch deklareerimist useDispatch jaoks, lisame koodi müüjate lõigu saamiseks olekust, kasutades haki useSelector:

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

Sisendväljade töötlejatele lisame veel ühe:

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

Korrigeerime onSaveProductClick, lisades ekseemlile productAdded ka sellerId:

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