Reduxi redutseerija ja action

Eelmisel tunnil lõpetasime toote lisamise vormi ja lisasime selle pealehele. Kuid praegu lisatud andmeid ei salvestata, teisisõnu uut toodet ei lisata olemasolevatele poes. Parandame selle.

Alustuseks avame oma tooterakenduses faili productsSlice.jsx ja kirjutame omadusse reducer funktsiooni createSlice jaoks funktsiooni productAdded, mis hoolitseb toode lisamise eest poodi, lähtudes talle edastatud praegusest olekust ja tegevusest. Tuleb märkida, et siin ei edastata meile kogu olekut, vaid ainult see osa, mis vastutab toodete eest (lõik products teab ainult sellest). Uue tootega objekt asub omaduses payload objekti action, mida genereeritakse vormi salvestusnupu vajutamise käsitleja poolt. Tulemusena näeb redutseerija productAdded välja koodis createSlice nii:

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

Aga tegevus? Õpiku alguses me mainisime, et tegevus on mingi sündmus, mis on esitatud objektina, kirjeldades seda, mis rakenduses juhtus. Rääkisime ka sellest, et saab kasutada tegevuse looja funktsiooni, mis loob meile sellise objekti, näiteks nii:

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

Hea uudis on see, et meil ei pea midagi tegema, sest selle teeb meie eest funktsioon createSlice, mida me kasutame. Niipea kui oleme kirjutanud redutseerija, loob see automaatselt meie jaoks tegevuse looja sama nimega. Meil jääb üle ainult eksportida saadud tegevuse looja edasiseks kasutamiseks komponentides. Teeme selle faili lõpus enne redutseerija eksportimist, nii:

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

Avage oma õpilaste rakendus, seejärel fail studentsSlice.jsx, lisage välja reducer väärtus jaoks createSlice, nagu on näidatud tunnis.

Lisage faili studentsSlice.jsx lõppu saadud tegevuse looja funktsiooni eksport.