Redux storedagi mahsulot ma'lumotlarini o'zgartirish

Biz mahsulot qo'shishni o'rgandik, lekin agar biz mahsulot haqidagi ma'lumotni o'zgartirmoqchi bo'lsak-chi? Keling, buni qanday amalga oshirishni ushbu va keyingi darslarda ko'rib chiqaylik.

Mahsulotlar ilovamizni ochamiz va productsSlice.js fayliga kiramiz. Keling, products slaysi uchun yana bir reducer yozishdan boshlaymiz, u mahsulot yangilanganda ishga tushadi. Uni productUpdated deb nomlaymiz va maydonga productAdded reduceridan keyin reducers qo'shamiz. Shuningdek, unga darhol state va action parametrlarini uzatamiz, ular asosida, esimizda, reducer ishlaydi:

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

Keling, mahsulotni yangilash uchun qanday ma'lumotlar kerak bo'lishini o'ylab ko'raylik. Avvalo - bu id, uning yordamida biz store ichidagi qiziqarli mahsulotni topa olamiz. Qolgan ma'lumotlar - nom, tavsif, narx va miqdor o'zgartirish uchun bizda bo'ladi. Bu qiymatlarning barchasini biz action ob'ektining payload xususiyatidan olamiz, u bizga keladi va, agar biz uni qo'lda yozayotgan bo'lsak, u quyida ko'rsatilgandek ko'rinadi. E'tibor bering, payload xususiyatining kutilayotgan qiymati - bitta argument, shuning uchun biz bu erga ob'ekt uzatamiz (bu haqda keyinroq gaplashamiz):

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

Asosiy nuqtalarni aniqlagandan so'ng, endi biz jingalak qavslar ichida kod yozishimiz mumkin productUpdated uchun. Avval action ob'ektidan o'zgartirilgan ma'lumotlarni olamiz:

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

Endi biz olingan id bo'yicha topamiz o'zgartirilishi kerak bo'lgan mahsulotni:

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

Agar bunday mahsulot storeda topilsa, unda biz uning ma'lumotlarini yangi qiymatlar bilan almashtiramiz:

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
  }
},

Biz uchun faqat action creatorni eksport qilish qoladi komponentda foydalanish uchun, uni biz uchun createSlice yaratadi. Keling, uni fayl oxiridagi eksportga qo'shamiz, mavjud productAdded bilan bir qatorda:

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