Reducer ir action Redux

Ankstesnėje pamokoje mes užbaigėme formą produktui pridėti ir išvedėme ją į pagrindinį puslapį. Tačiau kol kas pridėti duomenys neišsaugomi, kitaip tariant naujas produktas nepridedamas prie esamų store. Pataisykime tai.

Pirmiausia mūsų produktų programėlėje atidarykite failą productsSlice.jsx ir parašykite savybėje reducer skirtai createSlice funkciją productAdded, kuri užsiims produkto pridėjimu į store remiantis jai perduota esama būsena ir veiksmu. Reikia pažymėti, kad čia mums perduodama ne visa state, o tik ta jo dalis, kuri atsako už produktus (slice products žino tik apie ją). Objektas su nauju produktu bus savybėje payload objekto action, kuris bus generuojamas apdorotojo paspaudus išsaugojimo mygtuką formoje. Rezultate reducer productAdded atrodys kode createSlice taip:

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

O kaip su action? Pačioje vadovėlio pradžioje mes minėjome, kad action - tai tam tikras įvykis, pateikiamas kaip objektas, aprašantis tai, kas nutiko programoje. Mes taip pat kalbėjome apie tai, kad galima naudoti action creator funkciją, kuri mums sukurs tokį objektą, pavyzdžiui taip:

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

Geros naujienos yra tai, kad mums nereikia nieko daryti, o tai už mus atliks funkcija createSlice, kurią mes naudojame. Kai tik parašėme reducer, ji automatiškai mums sukurs action creator tokiu pačiu pavadinimu. Mums tik belieka eksportuoti gautą action creator tolesniam naudojimui komponentuose. Padarykime tai failo pabaigoje prieš eksportuodami reducerį, štai taip:

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

Atidarykite savo studentų programėlę, o tada failą studentsSlice.jsx, parašykite lauko reducer reikšmę skirtai createSlice, kaip parodyta pamokoje.

Pridėkite failo studentsSlice.jsx pabaigoje gautos funkcijos action creator eksportą.