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:

const 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:

const 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:

export const { productAdded } = productsSlice.actions
export default productsSlice.reducer

Nyissa meg a diák alkalmazását, majd a studentsSlice.jsx fájlt, egészítse ki a createSlice reducer mezőjének értékét, ahogyan azt a leckében bemutattuk.

Adja hozzá a studentsSlice.jsx fájl végéhez a kapott action creator függvény exportját.