Reduktor a akce v Redux

V minulé lekci jsme dokončili formulář pro přidání produktu a zobrazili jsme jej na hlavní stránce. Ale zatím se přidaná data neukládají, jinými slovy nový produkt se nepřidává k existujícím v store. Pojďme to napravit.

Pro začátek v naší aplikaci s produkty otevřeme soubor productsSlice.jsx a napíšeme do vlastnosti reducer pro createSlice funkci productAdded, která se bude zabývat přidáním produktu do store na základě jí předaného aktuálního stavu a akce. Je třeba poznamenat, že se nám zde nepředává celý state, ale pouze ta jeho část, která odpovídá za produkty (slice products zná pouze o ní). Objekt s novým produktem bude nacházet ve vlastnosti payload objektu action, který bude generován obslužnou rutinou při stisknutí tlačítka uložení ve formuláři. Výsledný reduktor productAdded bude vypadat v kódu createSlice takto:

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

A co akce? Na samém začátku učebnice jsme zmiňovali, že akce je určitá událost, reprezentovaná jako objekt, popisující to, co se stalo v aplikaci. Mluvili jsme i o tom, že lze použít funkci action creator, která nám bude vytvářet takový objekt, například takto:

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

Dobrá zpráva je, že my nemusíme nic dělat, a to za nás udělá funkce createSlice, kterou používáme. Jakmile jsme napsali reduktor, automaticky za nás vytvoří action creator se stejným jménem. Nám jen zbývá exportovat získaný action creator pro další použití v komponentách. Udělejme to na konci souboru před exportem reduktoru, takto:

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