Reducer og action i Redux

I den forrige lektion afsluttede vi formularen for at tilføje en produkt og viste den på forsiden. Men de tilføjede data gemmes endnu ikke, med andre ord bliver det nye produkt ikke tilføjet til de eksisterende i store. Lad os rette op på det.

Til at starte med i vores produktapplikation åbner vi filen productsSlice.jsx og skriver i egenskaben reducer for createSlice funktionen productAdded, som vil håndtere tilføjelsen af et produkt til store baseret på den nuværende state og action, der sendes til den. Det skal bemærkes, at vi ikke modtager hele state her, men kun den del, som svarer til produkter (slice't products kender kun til denne). Objektet med det nye produkt vil være i egenskaben payload af objektet action, som vil blive genereret af behandleren ved klik på gem-knappen i formularen. Som resultat vil reduceren productAdded se sådan ud i koden for createSlice:

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

Hvad med action? I starten af vejledningen nævnte vi, at en action er en begivenhed repræsenteret som et objekt, der beskriver hvad der er sket i applikationen. Vi talte også om, at man kan bruge en action creator-funktion, som vil skabe sådan et objekt for os, for eksempel sådan her:

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

Den gode nyhed er, at vi ikke behøver at gøre noget, fordi funktionen createSlice gør det for os. Lige så snart vi har skrevet reduceren, vil den automatisk skabe en action creator med det samme navn for os. Vi skal kun eksportere den resulterende action creator for senere brug i komponenterne. Lad os gøre dette i slutningen af filen før eksport af reduceren, sådan her:

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

Åbn din applikation med studerende, og åbn derefter filen studentsSlice.jsx, tilføj værdien i feltet reducer for createSlice, som vist i lektionen.

Tilføj i slutningen af filen studentsSlice.jsx eksport af den opnåede action creator-funktion.