Přidání informací o prodejci do Reduxu

Mluvili jsme o tom, že naše produkty jsou do aplikace vlastně přidávány prodejci. Pojďme při přidání nového produktu zobrazit informace o prodejci.

Otevřeme naši aplikaci s produkty, a v ní soubor productsSlice.js. Pojďme předat do prepare ještě jeden parametr, nazveme ho sellerId a nastavme ho dále pro payload akce. Nyní bude náš kousek kódu pro prepare vypadat takto:

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

Nyní potřebujeme provést řadu změn v souboru s formulářem pro přidání produktu NewProductForm.jsx. Nejprve přidejme ještě jeden lokální stav pro id prodejce:

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

Poté po deklaraci proměnné dispatch pro useDispatch, přidejme kód pro získání slicu prodejců ze stavu pomocí hooku useSelector:

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

Do obslužných rutin pro vstupní pole přidejme ještě jednu:

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

Upravme onSaveProductClick, přidáním pro akci productAdded ještě i sellerId:

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