Redux storeдаги маҳсулот маълумотларини ўзгартириш

Биз маҳсулотларни қўшишни ўргандик, агар биз маҳсулот ҳақидаги маълумотни ўзгартирмоқчи бўлсак нима қилишимиз керак? Келинг, бу ва кейинги дарсларда буни қандай қилишни кўриб чиқайлик.

Маҳсулотлар дастуримизни очайлик ва productsSlice.js файлини ochaylik. Keling, products слайси учун яна битта reducer ёзишдан бошлаймиз, у маҳсулот янгиланганда ишга тушади. Уни productUpdated деб атаймиз ва maydonга қўшамиз reducers reducerдан кейин productAdded. Шунингдек, унга дарҳол state ва параметрларни ўтказамиз action, улар asosida, биз eslaymiz, reducer ишлайди:

products/productsSlice.jsreducers: {
  productAdded(state, action) {
    state.push(action.payload)
  },
  productUpdated(state, action) {},
},

Энди келинг, ўйлайлик, қандай маълумотлар бизга керек бўлади маҳсулотни янгилаш учун. Аввало - бу id, унинг ёрдамида биз topishimiz мумкин бизни қизиктирган маҳсулотни storeда. Қолган маълумотлар - ном, tavsif, narx ва miqdor ўзгартириш учун бўлади. Барча қийматлар биз action объектининг payload хусусиятидан olamiz, у бизга келади, ва, агар биз уни ёзган бўлсак қўл bilan, у quyidagicha кўринар эди, кўрсатилгандей пастга. Эътибоring, кутілган қиймат payload хусусияти - битта аргумент, шунинг учун биз бу ерга объект узатамиз (бу ҳақида биз gaplashamiz keyinroq):

jsx{
  type: 'products/productUpdated',
  payload: {id, name, desc, price, amount}
}

Асосий нуқталарни аниклаб, энди биз жамланган qavs ichida кодни ёза оламиз productUpdated. Аввало olamiz action объектидан ўзгартирилган маълумотларни:

products/productsSlice.jsproductUpdated(state, action) {
  const { id, name, desc, price, amount } = action.payload
},

Энди биз олинган id бўйича маҳсулотни topamiz, уни ўзгартириш керак:

products/productsSlice.jsproductUpdated(state, action) {
  const { id, name, desc, price, amount } = action.payload
  const desiredProduct = state.find(product => product.id === id)
},

Агар бундай маҳсулот storeda топилган бўлса, у ҳолда биз унинг маълумотларини янги қийматлар билан алмаштирамиз:

products/productsSlice.jsproductUpdated(state, action) {
  const { id, name, desc, price, amount } = action.payload
  const desiredProduct = state.find(product => product.id === id)
  if (desiredProduct) {
    desiredProduct.name = name
    desiredProduct.desc = desc
    desiredProduct.price = price
    desiredProduct.amount = amount
  }
},

Бизга фақат action creatorni eksport qilish қолади компонентада ишлатиш учун, у createSlice биз учун яратади. Келинг, уни файл oxirida eksportga қўшайлик, mavjud productAdded билан бирга:

products/productsSlice.jsexport const { productAdded, productUpdated } = productsSlice.actions