A reducer és az action a Redux-ban

Az előző leckén befejeztük a termék hozzáadására szolgáló űrlapot és megjelenítettük a főoldalon. De az added adatok egyelőre nem kerülnek mentésre, más szóval az új termék nem adódik hozzá a store-ban létezőkhöz. Ezt javítsuk ki.

Először a termék alkalmazásunkban nyissuk meg a productsSlice.jsx fájlt és írjunk a createSlice reducer tulajdonságába egy productAdded nevű függvényt, amely a termék store-ba való hozzáadásával fog foglalkozni az átadott aktuális állapot és akció alapján. Fontos megjegyezni, hogy itt nem a teljes state kerül átadásra, csak az a része, amely a termékekért felelős (a products slice csak erről tud). Az új terméket tartalmazó objektum az action objektum payload tulajdonságában lesz, amelyet a mentés gomb megnyomásakor generál az űrlapkezelő. Ennek eredményeképpen a productAdded reducer a createSlice kódjában így fog kinézni:

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

Mi a helyzet az action-nal? A tankönyv legelején említettük, hogy az action - egy esemény, objektum formájában reprezentálva, leírva azt, ami az alkalmazásban történt. Beszéltünk arról is, hogy használhatunk action creator függvényt, ami létrehoz számunkra egy ilyen objektumot, például így:

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

A jó hír az, hogy semmit sem kell tennünk, ezt megteszi helyettünk a createSlice függvény, amelyet használunk. Amint megírtuk a reducer-t, automatikusan létrehozza számunkra az action creatort ugyanazzal a névvel. Nekünk csak exportálnunk kell a kapott action creatort a további felhasználáshoz a komponensekben. Tegyük ezt a fájl végén a reducer exportálása előtt, így:

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