Змяненне дадзеных прадукту ў Redux store

Мы навучыліся дадаваць прадукты, а што калі мы захочам змяніць інфармацыю пра прадукт? Давайце разгледзім як гэта зрабіць у гэтым і наступных уроках.

Адчынём наша прыкладанне з прадуктамі і зайдзем у файл productsSlice.js. Пачнем з таго, што нам трэба для слайса products напісаць яшчэ адзін reducer, які будзе запускацца пры абнаўленні прадукту. Назвем яго productUpdated і дадамо ў поле reducers пасля рэдьюсера productAdded. Таксама перададзім яму адразу параметрамі state і action, на аснове якіх, як мы помнім, працуе рэдьюсер:

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

Цяпер давайце падумаем, якія дадзеныя нам спатрэбяцца для абнаўлення прадукту. Перш за ўсё - гэта id, па ім мы зможам знайсці які цікавіць нас прадукт у store. Астатнія дадзеныя - назва, апісанне, цана і колькасць будуць у нас для змянення. Усе гэтыя значэнні мы атрымаем з уласцівасці payload аб'екта action, які нам прыйдзе, і, калі б мы пісалі яго рукамі, то ён бы выглядаў так, як паказана ніжэй. Заўважце, што чаканае значэнне ўласцівасці 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