Reduseerder en action in Redux

In die vorige les het ons die vorm om 'n produk by te voeg voltooi en dit op die hoofblad vertoon. Maar die bygevoegde data word nog nie gestoor nie, met ander woorde, die nuwe produk word nie by die bestaande in die store gevoeg nie. Kom ons maak dit reg.

Om te begin, sal ons in ons produkte-aansoek die lêer productsSlice.jsx oopmaak en in die eienskap reducer vir createSlice die funksie productAdded skryf, wat sal handel oor die byvoeging van die produk in die store gebaseer op die huidige staat en aksie wat aan dit oorgedra is. Daar moet op gelet word dat nie die hele state hier oorgedra word nie, maar net die gedeelte daarvan wat vir produkte verantwoordelik is (die slice products ken net daaraan). Die objek met die nuwe produk sal in die eienskap payload van die objek action wees, wat gegenereer sal word deur die verwerker wanneer die knoppie om te stoor in die vorm gedruk word. As gevolg sal die reduseerder productAdded so in die kode van createSlice lyk:

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

En wat van action? Heel aan die begin van die handleiding het ons genoem dat action 'n gebeurtenis is, verteenwoordig as 'n objek, wat beskryf wat in die aansoek gebeur het. Ons het ook gesê dat ons 'n funksie action creator kan gebruik, wat so 'n objek vir ons sal skep, byvoorbeeld so:

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

Die goeie nuus is dat ons niks hoef te doen nie, en die funksie createSlice sal dit vir ons doen, wat ons gebruik. Sodra ons die reducer geskryf het, sal dit outomaties 'n action creator vir ons skep met dieselfde naam. Ons hoef net die verkrygde action creator te eksporteer vir verdere gebruik in komponente. Kom ons doen dit aan die einde van die lêer voor die eksport van die reduseerder, soos volg:

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

Maak jou aansoek met studente oop, en dan die lêer studentsSlice.jsx, voeg die waarde van die veld reducer vir createSlice by, soos in die les gewys.

Voeg aan die einde van die lêer studentsSlice.jsx die eksport van die verkrygde action creator funksie by.