Voorbereiding van gegevens voor het action object in Redux

Onlangs hebben we besproken dat de functie createSlice één argument verwacht bij het aanmaken van action.payload. Aan de ene kant vereenvoudigt dit het gebruik, aan de andere kant kan het extra handelingen vereisen om de inhoud van het action object voor te bereiden.

Laten we onze applicatie met producten openen, en daarin het bestand NewProductForm.jsx. Let op de volgende regel code:

dispatch(productAdded({
	id: nanoid(), name, desc, price, amount
}))

Hier assembleren we het payload object rechtstreeks in de React component en geven het door aan de action productAdded. Maar wat als we dezelfde action vanuit meerdere componenten moeten versturen of de logica voor het assembleren complex wordt? In principe zou het onze component niet moeten uitmaken hoe het object in payload voor deze action eruitziet. Bovendien zijn we niet tevreden met de constante herhaling van code.

Deze problemen kan onze beroemde createSlice ons weer helpen oplossen, omdat het bij het schrijven van een reducer ons toestaat een callback-functie prepare te gebruiken, waarin we verschillende logica kunnen schrijven, willekeurige getallen kunnen genereren, enzovoort. In dat geval kan de waarde voor het reducer-veld worden weergegeven als het volgende object:

{reducer, prepare}

Laten we ons bestand productsSlice.js openen en de code voor de reducer productAdded aanpassen. Nu is dit stukje code:

productAdded(state, action) {
	state.push(action.payload)
},

We veranderen dit in het volgende, waarin de functie reducer zich bezighoudt met het updaten van de state in de store, en prepare - het retourneren van het payload object met de gegenereerde id en onze andere gegevens:

productAdded: {
	reducer(state, action) {
		state.push(action.payload)
	},
	prepare(name, desc, price, amount) {
		return {
			payload: {
				id: nanoid(),
				name,
				desc,
				price,
				amount,
			},
		}
	},
},

Omdat we nu de id hier gaan genereren, en niet in de component, laten we nanoid toevoegen aan de import:

import { createSlice, nanoid } from '@reduxjs/toolkit'

Ten slotte passen we de NewProductForm.jsx aan. In plaats van de regel:

dispatch(productAdded({
	id: nanoid(), name, desc, price, amount
}))

Zullen we deze hebben, waarin we eenvoudig de benodigde gegevens doorgeven, gescheiden door komma's (vergeet niet nanoid uit de import in dit bestand te verwijderen):

dispatch(productAdded(name, desc, price, amount))

Laten we de applicatie starten, vervolgens een nieuw product aanmaken en controleren of we niets hebben kapotgemaakt.

Open je applicatie met studenten. Herschrijf in het bestand StudentsSlice.js je reducer studentAdded zodanig dat deze in de vorm van een object {reducer, prepare} staat, zoals getoond in de les.

Breng de corresponderende wijzigingen aan in het bestand NewStudentForm.jsx, zoals getoond in de les. Start de applicatie en controleer dat alles werkt zoals voorheen.