Reducer a action v Reduxe

Na minulej lekcii sme dokončili formulár pre pridanie produktu a zobrazili ho na hlavnej stránke. Ale zatiaľ pridané dáta sa neukladajú, inými slovami nový produkt sa nepridáva k existujúcim v store. Poďme to napraviť.

Na začiatok v našej aplikácii s produktmi otvoríme súbor productsSlice.jsx a napíšeme do vlastnosti reducer pre createSlice funkciu productAdded, ktorá sa bude zaoberať pridávaním produktu do store na základe odovzdaného jej aktuálneho stavu a action. Treba poznamenať, že tu sa nám odovzdáva nie celý state, ale iba tá jeho časť, ktorá zodpovedá za produkty (slice products pozná iba ju). Objekt s novým produktom bude nachádzať sa vo vlastnosti payload objektu action, ktorý bude generovaný obslužným programom pri kliknutí na tlačidlo uloženia vo formulári. Výsledkom reducer productAdded bude vyzerať v kóde createSlice takto:

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

A čo action? Na samom začiatku učebnice sme spomenuli, že action - je nejaká udalosť, reprezentovaná ako objekt, opisujúca to, čo sa stalo v aplikácii. Hovorili sme aj o tom, že je možné použiť funkciu action creator, ktorá nám bude vytvárať taký objekt, napríklad takto:

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

Dobrá správa je, že nemusíme nič robiť, a to za nás urobí funkcia createSlice, ktorú používame. Akonáhle sme napísali reducer, automaticky za nás vytvorí action creator s rovnakým menom. Nám iba ostáva exportovať získaný action creator pre ďalšie použitie v komponentoch. Urobme to na konci súboru pred exportom reducera, takto:

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