Reducer ja action Reduxissa

Edellisellä oppitunnilla saimme valmiiksi lomakkeen tuotteen lisäämiseksi ja näytimme sen etusivulla. Mutta toistaiseksi lisätyt tiedot eivät tallennu, toisin sanoen uusi tuote ei lisäänny olemassa oleviin storeen. Korjataan tämä.

Aluksi tuotesovelluksessamme avaamme tiedoston productsSlice.jsx ja kirjoitamme ominaisuuteen reducer kohteelle createSlice funktion productAdded, joka vastaa tuotteen lisäämisestä storeen perustuen sille annettuun nykyiseen tilaan ja actioniin. On tärkeää huomata, että tänne ei välitetä koko stateta, vaan vain se osa siitä, joka vastaa tuotteista (slice products tuntee vain sen). Uusi tuoteolio löytyy ominaisuudesta payload oliosta action, joka luodaan käsittelijässä tallennuspainiketta painettaessa lomakkeessa. Tuloksena reducer productAdded näyttää koodissa createSlice tältä:

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

Entä action? Oppaan alussa mainitsimme, että action on tietty tapahtuma, esitettynä objektina, joka kuvailee sovelluksessa tapahtunutta. Puhuimme myös siitä, että voimme käyttää action creator -funktiota, joka luo meille tällaisen objektin, esimerkiksi näin:

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

Hyvä uutinen on, että meidän ei tarvitse tehdä mitään, vaan tämän tekee puolestamme funktio createSlice, jota käytämme. Heti kun olemme kirjoittaneet reducerin, se luo automaattisesti meille action creatorin samalla nimellä. Meidän tarvitsee vain viedä saatu action creator myöhempää käyttöä varten komponenteissa. Tehdään tämä tiedoston lopussa ennen reducerin viemistä, näin:

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