Het verzenden van action en de useDispatch hook in Redux

We hebben bijna alle onderdelen voor het laten werken van een Redux-applicatie geïmplementeerd. Het enige wat nog rest, is het verzenden van een action vanuit een React-component. Laten we beginnen.

Open onze applicatie met producten. In het formulier van de component NewProductForm hebben we een knop om de gegevens van een nieuw product op te slaan. Laten we hier een click-handler aan toevoegen. Laat bij een klik de handler onSaveProductClick worden uitgevoerd:

<button type="button" onClick={onSaveProductClick}>
	save
</button>

Voor het aanmaken van een nieuw product hebben we een nieuwe id nodig. We genereren deze met behulp van de bekende bibliotheek nanoid. Trouwens, deze hoeft niet geïnstalleerd te worden, omdat deze al bij het RTK-pakket zit. Laten we nanoid toevoegen aan de import:

import { nanoid } from '@reduxjs/toolkit'

We herinneren ons ook dat de enige manier om de state te wijzigen, is door de methode dispatch aan te roepen, die beschikbaar is in de store, en een action-object door te geven. Om bij deze methode te komen, gebruiken we de React-Redux hook useDispatch. Laten we deze ook importeren:

import { useDispatch } from 'react-redux'

In de code van de functie NewProductForm maken we er meteen een constante dispatch voor aan, nadat we constanten voor onze lokale states hebben aangemaakt:

const dispatch = useDispatch()

We moeten ook de action creator productAdded importeren, die we in de vorige les hebben gekregen:

import { productAdded } from './productsSlice'

Nu kunnen we de handler-functie onSaveProductClick schrijven. Laten we dit doen vóór de return opdracht:

const onSaveProductClick = () => {}

Binnen in de functie roepen we dispatch aan, vormen we het action-object, waar in de eigenschap payload de gegenereerde id, naam, beschrijving, prijs en hoeveelheid van het product terechtkomen. Al deze gegevens halen we uit de lokale states. Hierbij controleren we eerst in een conditie of alle velden zijn ingevuld - alleen in dat geval roepen we dispatch aan. Aan het einde van de functiecode zetten we de lokale states terug in hun oorspronkelijke staat:

const onSaveProductClick = () => {
	if (name && desc && price && amount) {
		dispatch(
			productAdded({
				id: nanoid(),
				name,
				desc,
				price,
				amount
			})
		)

		setName('')
		setDesc('')
		setPrice(0)
		setAmount(0)
	}
}

Laten we nu onze applicatie starten, gegevens in de formuliervelden invoeren en op de opslaan-knop klikken. Hoera, onderaan de pagina verscheen een nieuw product. Als we Redux DevTools openen, en daarin het tabblad Inspector, zien we dat links naast @@INIT ook onze action products/productAdded verschenen is. En aan de rechterkant kunnen we klikken op de tabbladen Action en State, terwijl we wisselen tussen @@INIT en products/productAdded. Nu zien we dat ons nieuwe product wordt toegevoegd. Ook zien we op het tabblad Action de action die automatisch gegenereerd is met createSlice (klik bijvoorbeeld op Raw). Hoera: we hoefden hem niet handmatig te schrijven.

Open je applicatie met studenten, en vervolgens het bestand NewStudentForm.jsx, voeg een click-handler toe aan de opslaan-knop.

Schrijf alle benodigde imports en schrijf de handler-functie onSaveStudentClick, pas de methode dispatch toe zoals getoond in de les.

Start de applicatie, voer gegevens in de formuliervelden in en klik op de opslaan-knop. Controleer of onderaan de pagina een nieuwe student is toegevoegd.

Open Redux DevTools en ga door de tabbladen Action en State, controleer of het nieuwe studentobject wordt toegevoegd. Bekijk het action-object dat voor jou is gegenereerd en stuur het in als antwoord op deze taak.