Reducer in action v Redux

V prejšnji lekciji smo končali obrazec za dodajanje izdelka in ga prikazali na glavni strani. Toda za zdaj se dodani podatki ne shranijo, z drugimi besedami, nov izdelek se ne doda k obstoječim v store. Popravimo to.

Za začetek bomo v naši aplikaciji z izdelki odprli datoteko productsSlice.jsx in napisali v lastnosti reducer za createSlice funkcijo productAdded, ki bo skrbela za dodajanje izdelka v store na podlagi posredovanega trenutnega stanja in akcije. Omeniti velja, da se nam tukaj ne posreduje celotno state, ampak le tisti del, ki odgovarja za izdelke (slice products pozna samo njega). Objekt z novim izdelkom bo v lastnosti payload objekta action, ki ga bo generiral obravnavalec ob pritisku na gumb za shranjevanje v obrazcu. Kot rezultat bo reducer productAdded v kodi createSlice videti takole:

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

Kaj pa action? Na samem začetku učbenika smo omenili, da je action neki dogodek, predstavljen v obliki objekta, ki opisuje, kar se je zgodilo v aplikaciji. Govorili smo tudi o tem, da lahko uporabimo funkcijo action creator, ki bo za nas ustvarila tak objekt, na primer takole:

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

Dobra novica je, da nam ni treba ničesar narediti, kajti to bo namesto nas naredila funkcija createSlice, ki jo uporabljamo. Takoj ko napišemo reducer, bo samodejno ustvarila za nas action creator z enakim imenom. Nam preostane le še izvoz nastalega action creatorja za nadaljnjo uporabo v komponentah. Naredimo to na koncu datoteke pred izvozom reducerja, takole:

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

Odprite vašo aplikacijo s študenti, nato pa datoteko studentsSlice.jsx in dopolnite vrednost polja reducer za createSlice, kot je prikazano v lekciji.

Dodajte na konec datoteke studentsSlice.jsx izvoz nastale funkcije action creator.