Modyfikacja danych produktu w Redux store

Nauczyliśmy się dodawać produkty, a co jeśli będziemy chcieli zmienić informację o produkcie? Przyjrzyjmy się, jak to zrobić na tej i kolejnych lekcjach.

Otwórzmy naszą aplikację z produktami i przejdźmy do pliku productsSlice.js. Zacznijmy od tego, że dla slice'a products musimy napisać kolejny reducer, który będzie uruchamiany przy aktualizacji produktu. Nazwijmy go productUpdated i dodajmy w polu reducers po reducerze productAdded. Również przekażmy mu od razu parametrami state i action, na podstawie których, jak pamiętamy, działa reducer:

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

Teraz pomyślmy, jakie dane będą nam potrzebne do aktualizacji produktu. Przede wszystkim - to id, po nim będziemy mogli znaleźć interesujący nas produkt w store. Pozostałe dane - nazwa, opis, cena i ilość będą dla nas do zmiany. Wszystkie te wartości otrzymamy z właściwości payload obiektu action, który do nas przyjdzie, i gdybyśmy pisali go ręcznie, to wyglądałby on tak, jak pokazano poniżej. Zauważ, że oczekiwana wartość właściwości payload - to jeden argument, więc będziemy przekazywać tutaj obiekt (o tym porozmawiamy w dalszej części):

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

Wyjaśniwszy główne kwestie, teraz możemy napisać w nawiasach klamrowych kod dla productUpdated. Najpierw pobierzmy z obiektu action zmienione dane:

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

Teraz znajdziemy po otrzymanym id produkt, który trzeba zmienić:

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

Jeśli taki produkt został znaleziony w store, to zamienimy jego dane na nowe wartości:

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

Pozostaje nam tylko wyeksportować action creator do użycia w komponencie, który uprzejmie stworzy za nas createSlice. Dodajmy go do eksportu na końcu pliku, obok istniejącego productAdded:

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