Afsendelse af action og useDispatch hook i Redux

Vi har implementeret næsten alle komponenter for at få et Redux-program til at fungere. Tilbage står kun at finde ud af at afsende en action fra en React-komponent. Lad os komme i gang.

Åbn vores applikation med produkter. I formen i komponenten NewProductForm har vi en knap til at gemme data for et nyt produkt. Lad os tilføje en klik-håndtering til den. Lad den ved klik udløse handlingen onSaveProductClick:

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

Ved oprettelse af et nyt produkt har vi brug for en ny id til det. Vi vil generere den ved hjælp af den velkendte bibliotek nanoid. Forresten, den behøver du ikke installere, da den allerede følger med RTK-pakken. Lad os tilføje nanoid til importen:

import { nanoid } from '@reduxjs/toolkit'

Vi husker også, at den eneste måde at ændre state på - er at kalde metoden dispatch, som findes i store, og videregive et action-objekt. For at få adgang til denne metode vil vi anvende React-Redux hook useDispatch. Lad os importere den:

import { useDispatch } from 'react-redux'

I koden for funktionen NewProductForm opretter vi en konstant dispatch for den lige efter at vi har oprettet konstanter for vores lokale states:

const dispatch = useDispatch()

Vi skal også importere action creator productAdded, som vi fik i sidste lektion:

import { productAdded } from './productsSlice'

Nu kan vi skrive selve funktionen for håndteringen onSaveProductClick. Lad os gøre dette før kommandoen return:

const onSaveProductClick = () => {}

Inde i funktionen kalder vi dispatch, danner action-objektet, hvor i egenskaben payload vil vi have den genererede id, navn, beskrivelse, pris og antal produkt. Alle disse data tager vi fra de lokale states. Samtidig tjekker vi i starten i en betingelse om alle felter er udfyldt - kun i dette tilfælde kalder vi dispatch. I slutningen af funktionens kode returnerer vi de lokale states til deres oprindelige tilstand:

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

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

Lad os nu starte vores applikation, indtaste data i formularfelterne og trykke på knappen for at gemme. Hurra, nederst på siden dukkede der op et nyt produkt. Ved at åbne Redux DevTools, og i den fanen Inspector, ser vi, at til venstre foruden @@INIT er der også vores action products/productAdded. Og i højre del kan vi klikke på fanerne Action og State, imens vi skifter mellem @@INIT og products/productAdded. Nu ser vi, at vores nye produkt bliver tilføjet. Også på fanen Action ser vi actionen, genereret automatisk med createSlice (klik for eksempel på Raw). Hurra: vi behøvede ikke at skrive den manuelt.

Åbn din applikation med studerende, og derefter filen NewStudentForm.jsx, tilføj en klik-håndtering til gemme-knappen.

Skriv alle nødvendige imports og skriv funktionen onSaveStudentClick, ved at anvende metoden dispatch som vist i lektionen.

Start applikationen, indtast data i formularfelterne og tryk på gemme-knappen. Sørg for, at en ny studerende er tilføjet nederst på siden.

Åbn Redux DevTools og gå igennem fanerne Action og State, sørg for, at det nye objekt med den studerende bliver tilføjet. Se på action-objektet, som blev genereret for dig, og send det som svar på denne opgave.