Produkto duomenų keitimas Redux store

Išmokome pridėti produktus, o kas jei norėtume pakeisti informaciją apie produktą? Pažiūrėkime, kaip tai padaryti šioje ir keliose sekančiose pamokose.

Atidarykime mūsų produktų aplikaciją ir eikime į failą productsSlice.js. Pradėsime nuo to, kad mums reikia products slice'ui parašyti dar vieną reducerį, kuris bus paleidžiamas atnaujinant produktą. Pavadinkime jį productUpdated ir pridėkime į lauką reducers po reducerio productAdded. Taip pat perduokime jam iškart parametrais state ir action, remiantis kuriais, kaip prisimename, veikia reduceris:

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

Dabar pagalvokime, kokie duomenys mums reikės produkto atnaujinimui. Pirmiausia - tai id, pagal jį galėsime rasti mums įdomų produktą store. Kiti duomenys - pavadinimas, aprašymas, kaina ir kiekis bus mums pakeitimui. Visas šias reikšmes gausime iš savybės payload objekto action, kuris mums ateis, ir, jei rašytume jį rankomis, tai jis atrodytų taip, kaip parodyta žemiau. Atkreipkite dėmesį, kad tikėtina reikšmė savybės payload - vienas argumentas, todėl mes perduosime čia objektą (apie tai pakalbėsime vėliau):

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

Išsiaiškinę pagrindinius momentus, dabar galime parašyti riestiniuose skliaustuose kodą productUpdated. Pirmiausia gausime iš objekto action pakeistus duomenis:

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

Dabar rasime pagal gautą id produktą, kurį reikia pakeisti:

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

Jei toks produktas buvo rastas store, tai mes pakeisime jo duomenis naujomis reikšmėmis:

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

Mums belieka tik eksportuoti action creator'į naudojimui komponente, kurį maloniai sukurs už mus createSlice. Pridėkime jį prie eksporto failo pabaigoje, kartu su esamu productAdded:

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