Reduktor i action w Redux

Na poprzedniej lekcji zakończyliśmy formularz do dodawania produktu i wyświetliliśmy go na stronie głównej. Ale na razie dodane dane nie są zapisywane, innymi słowy nowy produkt nie jest dodawany do istniejących w store. Naprawmy to.

Na początek w naszej aplikacji z produktami otworzymy plik productsSlice.jsx i napiszemy w właściwości reducer dla createSlice funkcję productAdded, która będzie zajmować się dodawaniem produktu do store na podstawie przekazanych jej bieżącego stanu i akcji. Należy zaznaczyć, że przekazywany jest tu nie cały state, a tylko ta jego część, która odpowiada za produkty (slice products zna tylko ją). Obiekt z nowym produktem będzie znajdować się we właściwości payload obiektu action, który będzie generowany przez procedurę obsługi po naciśnięciu przycisku zapisywania w formularzu. W rezultacie reduktor productAdded będzie wyglądać w kodzie createSlice tak:

products/productsSlice.jsconst productsSlice = createSlice({
  name: 'products',
  initialState,
  reducers: {
    productAdded(state, action) {
      state.push(action.payload)
    },
  },
})

A co z action? Na samym początku podręcznika wspominaliśmy o tym, że action - to pewne zdarzenie, przedstawione w postaci obiektu, opisujące to, co wydarzyło się w aplikacji. Mówiliśmy też o tym, że można użyć funkcji action creator, która będzie nam tworzyć taki obiekt, na przykład tak:

jsxconst addProduct = newProduct => {
  return {
    type: 'products/productAdded',
    payload: newProduct
  }
}

Dobra wiadomość jest taka, że nie musimy nic robić, a zrobi to za nas funkcja createSlice, której używamy. Jak tylko napisaliśmy reducer, automatycznie stworzy ona za nas action creator o tej samej nazwie. Nam tylko pozostaje wyeksportować otrzymany action creator do dalszego użycia w komponentach. Zróbmy to na końcu pliku przed eksportem reduktora, w ten sposób:

products/productsSlice.jsexport const { productAdded } = productsSlice.actions
export default productsSlice.reducer