Reduser og action i Redux

I forrige leksjon fullførte vi skjemaet for å legge til et produkt og viste det på hovedsiden. Men foreløpig blir de lagt til dataene ikke lagret, med andre ord blir det nye produktet ikke lagt til de eksisterende i store. La oss fikse dette.

Først i vår produktapplikasjon åpner vi filen productsSlice.jsx og skriver i egenskapen reducer for createSlice en funksjon productAdded, som vil håndtere tilføyelsen av et produkt til store basert på den nåværende tilstanden og handlingen som sendes til den. Det bør bemerkes at det ikke er hele state som sendes hit, men bare den delen som ansvarer for produkter (slice products kjenner bare til den). Objektet med det nye produktet vil være i egenskapen payload til objektet action, som vil bli generert av behandleren når lagre-knappen trykkes i skjemaet. Resultatet vil være at redusereren productAdded vil se slik ut i koden for createSlice:

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

Hva med action? helt i starten av opplæringen nevnte vi at en action er en hendelse presentert som et objekt, som beskriver det som skjedde i applikasjonen. Vi snakket også om at vi kan bruke en action creator-funksjon, som vil lage et slikt objekt for oss, for eksempel slik:

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

Den gode nyheten er at vi ikke trenger å gjøre noe med dette, for funksjonen createSlice vil gjøre det for oss. Så snart vi har skrevet en reduser, vil den automatisk lage en action creator med samme navn for oss. Alt vi må gjøre er å eksportere den resulterende action creator for videre bruk i komponenter. La oss gjøre dette på slutten av filen før eksport av redusereren, slik:

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

Åpne applikasjonen din med studenter, og deretter filen studentsSlice.jsx, skriv til verdien for feltet reducer for createSlice, som vist i leksjonen.

Legg til på slutten av filen studentsSlice.jsx en eksport av den resulterende action creator-funksjonen.