Reducer en action in Redux

In de vorige les hebben we het formulier voor het toevoegen van een product afgerond en weergegeven op de hoofdpagina. Maar voorlopig worden de toegevoegde gegevens niet opgeslagen, met andere woorden het nieuwe product wordt niet toegevoegd aan de bestaande in de store. Laten we dit oplossen.

Om te beginnen openen we in onze applicatie met producten het bestand productsSlice.jsx en schrijven we in de eigenschap reducer voor createSlice de functie productAdded, die zich zal bezighouden met het toevoegen van een product aan de store op basis van de doorgegeven huidige state en action. Op te merken valt dat hier niet de volledige state wordt doorgegeven, maar alleen het deel dat verantwoordelijk is voor producten (de slice products kent alleen dit deel). Het object met het nieuwe product zit in de eigenschap payload van het object action, die gegenereerd wordt door de event handler bij het klikken op de opslaanknop in het formulier. Uiteindelijk ziet de reducer productAdded er zo uit in de code van createSlice:

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

En hoe zit het met action? Helemaal aan het begin van de tutorial hebben we vermeld dat een action een bepaalde gebeurtenis is, vertegenwoordigd als een object, dat beschrijft wat er is gebeurd in de applicatie. We hebben ook gesproken over het feit dat we een action creator functie kunnen gebruiken, die zo'n object voor ons aanmaakt, bijvoorbeeld zo:

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

Het goede nieuws is dat we niets hoeven te doen, en dat de functie createSlice dit voor ons zal doen, die we gebruiken. Zodra we de reducer hebben geschreven, zal deze automatisch een action creator met dezelfde naam voor ons aanmaken. Het enige wat we hoeven te doen is de verkregen action creator exporteren voor verdere toepassing in componenten. Laten we dit aan het einde van het bestand doen, vóór het exporteren van de reducer, zoals hier:

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

Open je applicatie met studenten, en open dan het bestand studentsSlice.jsx, vul de waarde van het veld reducer in voor createSlice, zoals getoond in de les.

Voeg aan het einde van het bestand studentsSlice.jsx de export van de verkregen action creator functie toe.