Pārdevēja informācijas pievienošana Redux

Mēs runājām par to, ka mūsu produktus faktiski pievieno pārdevēji. Pievienojot jaunu produktu, parādīsim informāciju par pārdevēju.

Atveriet mūsu produktu lietotni, un tajā failu productsSlice.js. Padomāsim par to, lai prepare padotos vēl viens parametrs, sauksim to par sellerId un iestatīsim to tālāk payload ekšenam. Tagad mūsu prepare koda fragments būs šāds:

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

Tagad mums ir jāveic vairākas izmaiņas failā ar formu produkta pievienošanai NewProductForm.jsx. Sākumā pievienosim vēl vienu lokālo stāvokli pārdevēja id:

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

Tad pēc mainīgā dispatch deklarēšanas priekš useDispatch, pievienosim kodu pārdevēju slaisa iegūšanai no stāvokļa, izmantojot āķi useSelector:

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

Ievades lauku apstrādātājiem pievienosim vēl vienu:

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

Labosim onSaveProductClick, pievienojot ekšenam productAdded arī sellerId:

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