Վաճառողի տվյալների ավելացումը 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))