Produkta datu maiņa Redux store

Mēs iemācījāmies pievienot produktus, bet ko ja mēs vēlēsimies mainīt informāciju par produktu? Apskatīsim, kā to izdarīt šajā un turpmākajās nodarbībās.

Atvērsim mūsu lietotni ar produktiem un dosimies uz failu productsSlice.js. Sāksim ar to, ka mums vajadzīgs produktu slīcenim products uzrakstīt vēl vienu reduceri, kas tiks palaists, kad produkts tiek atjaunināts. Nosauksim to par productUpdated un pievienosim laukā reducers aiz reducera productAdded. Arī nekavējoties padodam tam parametrus state un action, uz kuru pamata, kā mēs atceramies, strādā reducers:

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

Tagad padomāsim, kādi dati mums būs nepieciešami, lai atjauninātu produktu. Vispirms visu - tas ir id, pēc tā mēs varēsim atrast interesējošo produktu store. Pārējie dati - nosaukums, apraksts, cena un daudzums būs mūsu rīcībā izmaiņām. Visas šīs vērtības mēs iegūsim no īpašības payload objekta action, kas mums ieradīsies, un, ja mēs rakstītu to ar rokām, tas izskatītos tā, kā parādīts zemāk. Ievērojiet, ka gaidāmā vērtība īpašībai payload - viens arguments, tāpēc mēs padodam šeit objektu (par to mēs runāsim tālāk):

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

Noskaidrojot galvenos punktus, tagad mēs varam ierakstīt cirtainajās iekavās kodu priekš productUpdated. Vispirms iegūstam no objekta action mainītos datus:

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

Tagad mēs atradīsim pēc iegūtā id produktu, kas jāmaina:

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

Ja šāds produkts tika atrasts store, tad mēs aizstāsim tā datus ar jaunām vērtībām:

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 atliek tikai eksportēt action creator lietošanai komponentē, ko laipni mums izveidos createSlice. Pievienosim to eksportam faila beigās, līdzās esošajam productAdded:

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