Redux store'догу продукттун маалыматтарын өзгөртүү

Биз продукттарды кошуду үйрөндүк, бирок продукт жөнүндөгү маалыматты өзгөрткүбүз келсе? Бул жана кийинки сабактарда муну кантип жасаганыбызды карап көрөлү.

Продукттар колдонмобузду ачып, productsSlice.js файлына кирейли. Баштапкы кылып, бизге products слайси үчүн дагы бир reducer жазышыбыз керек, ал продукт жаңыртылганда ишке кирет. Аны productUpdated деп атап, талаага reducers редьюсерден кийин кошобуз. Ошондой эле ага параметр катары state жана action беребиз, алардын негизинде, эсибизде болгондой, редьюсер иштейт:

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

Эми продуктту жаңыртуу үчүн кандай маалымат керек экенин ойлонолу. Биринчиден - бул id, анын жардамы менен биз store'догу бизди кызыктырган продуктту таба алабыз. Калган маалыматтар - аталышы, сүрөттөлүшү, баасы жана саны биз үчүн өзгөртүлөт. Бул баалуулуктардын баарын биз action объектисинин payload касиетинен алабыз, ал бизге келет, эгер аны кол менен жазсақ, анда ал төмөндө көрсөтүлгөндөй көрүнөт. Сын- payload касиетинин күтүлгөн мааниси - бир аргумент, ошондуктан биз бул жерге объект беребиз (бул жөнүндө биз кийинчерээк сүйлөшөбүз):

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

Негизги учурларды аныктагандан кийин, биз эми кашаалардын ичине productUpdated үчүн код жаза алабыз. Биринчиден, action объектисинен өзгөртүлгөн маалыматты алабыз:

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

Эми биз алган id боюнча өзгөртүлүшү керек болгон продуктту табабыз:

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

Эгер мындай продукт store'до табылса, анда биз анын маалыматын жаңы маанилер менен алмаштырабыз:

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 creator'ду экспорттоп коюу гана калды, аны биз үчүн createSlice берет. Келгиле, файлдын аягындагы экспортко кошобуз, бар болгон productAdded менен катар:

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