Reducer och action i Redux

I förra lektionen avslutade vi formuläret för att lägga till en produkt och visade det på hemsidan. Men de tillagda uppgifterna sparas inte ännu, med andra ord läggs den nya produkten inte till de befintliga i store. Låt oss åtgärda detta.

Först i vår produktapplikation öppnar vi filen productsSlice.jsx och skriver i egenskapen reducer för createSlice funktionen productAdded, som kommer att hantera tillägget av en produkt till store baserat på det nuvarande tillståndet och action som skickas till den. Det är viktigt att notera att vi här inte får hela state, utan bara den del som ansvarar för produkter (slice products känner bara till den). Objektet med den nya produkten kommer att finnas i egenskapen payload i objektet action, som kommer att genereras av hanteraren när spara-knappen trycks i formuläret. Resultatet blir att reducern productAdded kommer att se ut så här i koden för createSlice:

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

Hur är det med action? I början av handledningen nämnde vi att en action är en händelse, representerad som ett objekt, som beskriver vad som har hänt i applikationen. Vi pratade också om att man kan använda en action creator-funktion, som skulle skapa ett sådant objekt åt oss, till exempel så här:

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

Den goda nyheten är att vi inte behöver göra någonting, för createSlice-funktionen gör det åt oss. Så snart vi har skrivit en reducer skapar den automatiskt en action creator med samma namn åt oss. Vi behöver bara exportera den resulterande action creatern för vidare användning i komponenter. Låt oss göra det i slutet av filen före exporten av reducern, så här:

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

Öppna din studentapplikation, och sedan filen studentsSlice.jsx, lägg till värdet för fältet reducer för createSlice, som visas i lektionen.

Lägg till i slutet av filen studentsSlice.jsx export av den resulterande action creator-funktionen.