Sending action and useDispatch hook in Redux

Vi har implementert nesten alle komponenter for å få Redux-applikasjonen til å fungere. Det som gjenstår er å finne ut av hvordan man sender en action fra en React-komponent. La oss komme i gang.

Åpne produktapplikasjonen vår. I skjemaet til komponenten NewProductForm har vi en knapp for å lagre dataene til det nye produktet. La oss legge til en klikk-håndterer på den. La klikk-håndtereren onSaveProductClick utløses når vi klikker på den:

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

For å opprette et nytt produkt trenger vi en ny id for det. Vi vil generere den ved hjelp av den velkjente biblioteken nanoid. Forresten, den trenger du ikke å installere, siden den allerede følger med RTK-pakken. La oss legge til nanoid i importen:

import { nanoid } from '@reduxjs/toolkit'

Vi husker også at den eneste måten å endre state på er å kalle metoden dispatch, som finnes på store, og sende med et action-objekt. For å få tilgang til denne metoden, vil vi bruke React-Redux-hooken useDispatch. La oss importere den også:

import { useDispatch } from 'react-redux'

I koden til funksjonen NewProductForm oppretter vi en konstant dispatch for den rett etter at vi har opprettet konstanter for våre lokale states:

const dispatch = useDispatch()

Vi må også importere action creator-en productAdded, som vi fikk i forrige leksjon:

import { productAdded } from './productsSlice'

Nå kan vi skrive selve funksjonen for håndtereren onSaveProductClick. La oss gjøre dette før return-kommandoen:

const onSaveProductClick = () => {}

Inne i funksjonen kaller vi dispatch, danner action-objektet, hvor i egenskapen payload vil vi putte den genererte id-en, navn, beskrivelse, pris og antall produkt. Alle disse dataene henter vi fra de lokale state-ene. Samtidig sjekker vi i starten med en betingelse om alle feltene er fylt ut - bare i så fall kaller vi dispatch. På slutten av funksjonskoden returnerer vi de lokale state-ene til deres opprinnelige tilstand:

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

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

La oss nå starte applikasjonen vår, skrive inn data i skjemafeltene og trykke på lagre-knappen. Hurra, et nytt produkt dukket opp nederst på siden. Ved å åpne Redux DevTools, og der fanen Inspector, ser vi at til venstre, i tillegg til @@INIT, er action-en vår products/productAdded også dukket opp. Og i høyre del kan vi klikke på fanene Action og State, og veksle mellom @@INIT og products/productAdded. Nå ser vi at det nye produktet vårt blir lagt til. Også på Action-fanen ser vi action-en, som ble generert automatisk ved hjelp av createSlice (klikk for eksempel på Raw). Hurra: vi trengte ikke å skrive den manuelt.

Åpne studentapplikasjonen din, og deretter filen NewStudentForm.jsx, legg en klikk-håndterer på lagre-knappen.

Skriv alle nødvendige imports og skriv funksjonen onSaveStudentClick som håndterer klikk, ved å bruke metoden dispatch som vist i leksjonen.

Start applikasjonen, skriv inn data i skjemafeltene og trykk på lagre-knappen. Forsikre deg om at en ny student har blitt lagt til nederst på siden.

Åpne Redux DevTools og gå gjennom Action- og State-fanene, forsikre deg om at det nye studentobjektet blir lagt til. Se på action-objektet som ble generert for deg, og send det som svar på denne oppgaven.