Дадаванне інфармацыі аб прадаўцы ў Redux

Мы з вамі казалі аб тым, што нашы прадукты фактычна дадаюцца ў прыкладанне прадаўцамі. Давайце пры даданні новага прадукту будзем выводзіць інфармацыю аб прадаўцы.

Адчэпім наша прыкладанне з прадуктамі, а ў ім файл productsSlice.js. Давайце будзем перадаваць у prepare яшчэ адзін параметр, назвем яго sellerId і ўстаноўім яго далей для payload экшэна. Цяпер наш кавалак кода для prepare будзе такім:

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

Цяпер нам трэба ўнесці шэраг зменаў у файл з формай для дадання прадукту NewProductForm.jsx. Для пачатку дадамо яшчэ адзін лакальны стэйт для id прадаўцы:

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

Затым пасля аб'яўлення зменнай dispatch для useDispatch, дадамо код для атрымання слайса прадаўцоў з стэйта пры дапамозе хука useSelector:

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

У апрацоўшчыкі для палей уводу дадамо яшчэ адзін:

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

Папраўім onSaveProductClick, дадаўшы для экшэна productAdded яшчэ і sellerId:

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