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 වෙනස්කම් රාශියක් කළ යුතුය. පළමුව විකුණුම්කරුගේ හැඳුනුම්පත සඳහා තවත් දේශීය තත්වයක් එකතු කරමු:

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))