Změna dat produktu v Redux store

Naučili jsme se přidávat produkty, ale co když budeme chtít změnit informace o produktu? Podívejme se, jak to udělat v této a následujících lekcích.

Otevřeme naši aplikaci s produkty a přejděme do souboru productsSlice.js. Začněme tím, že pro slice products potřebujeme napsat další reducer, který se spustí při aktualizaci produktu. Pojmenujeme jej productUpdated a přidáme do pole reducers za reducer productAdded. Také mu předáme jako parametry state a action, na jejichž základě, jak si pamatujeme, reducer funguje:

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

Nyní se zamysleme, jaká data budeme potřebovat pro aktualizaci produktu. Především - to je id, podle něj budeme moci najít požadovaný produkt v store. Zbývající data - název, popis, cena a množství budou určena ke změně. Všechny tyto hodnoty získáme z vlastnosti payload objektu action, který k nám přijde, a pokud bychom jej psali ručně, vypadal by tak, jak je znázorněno níže. Všimněte si, že očekávaná hodnota vlastnosti payload - jeden argument, proto budeme sem předávat objekt (o tom si povíme dále):

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

Poté, co jsme objasnili hlavní body, nyní můžeme napsat do složených závorek kód pro productUpdated. Nejprve získáme z objektu action změněná data:

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

Nyní najdeme podle získaného id produkt, který je třeba změnit:

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

Pokud byl takový produkt v store nalezen, nahradíme jeho data novými hodnotami:

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

Zbývá nám pouze exportovat action creator pro použití v komponentě, který za nás laskavě vytvoří createSlice. Přidejme jej k exportu na konci souboru, spolu se stávajícím productAdded:

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