Reducer i action u Redux-u

Na prošloj lekciji završili smo formu za dodavanje proizvoda i prikazali je na glavnoj stranici. Ali za sada dodati podaci se ne čuvaju, drugim rečima novi proizvod se ne dodaje postojećim u store-u. Hajde da to ispravimo.

Za početak u našoj aplikaciji sa proizvodima otvorićemo fajl productsSlice.jsx i napisati u svojstvu reducer za createSlice funkciju productAdded, koja će se baviti dodavanjem proizvoda u store na osnovu prosledjenih joj trenutnog stanja i akcije. Treba napomenuti da nam se ovde ne prosledjuje ceo state, već samo onaj njegov deo koji odgovara za proizvode (slice products zna samo o njemu). Objekat sa novim proizvodom će se nalaziti u svojstvu payload objekta action, koji će se generisati obrađivačem prilikom pritiska dugmeta za čuvanje u formi. Kao rezultat, reducer productAdded će izgledati u kodu createSlice ovako:

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

A šta je sa action-om? Na samom početku udžbenika spomenuli smo da je action - neki događaj, predstavljen u obliku objekta, koji opisuje ono što se desilo u aplikaciji. Govorili smo i o tome da možemo koristiti funkciju action creator, koja će nam kreirati takav objekat, na primer ovako:

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

Dobra vest je u tome što mi ne moramo ništa da radimo, jer će to umesto nas uraditi funkcija createSlice, koju koristimo. Čim smo napisali reducer, ona će automatski kreirati za nas action creator sa istim imenom. Nama ostaje samo da eksportujemo dobijeni action creator za dalju primenu u komponentama. Uradićemo to na kraju fajla pre eksportovanja reducera, ovako:

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

Otvori vašu aplikaciju sa studentima, a zatim fajl studentsSlice.jsx, dopišite vrednost polja reducer za createSlice, kao prikazano u lekciji.

Dodajte na kraj fajla studentsSlice.jsx eksport dobijene funkcije action creator.