Skicka action och useDispatch-hook i Redux

Vi har implementerat nästan alla delar för att ett Redux-program ska fungera. Allt som återstår är att ta reda på hur man skickar en action från en React-komponent. Låt oss börja.

Öppna vår produktapplikation. I formuläret för komponenten NewProductForm har vi en knapp för att spara data för en ny produkt. Låt oss lägga till en klickhanterare för den. Låt klickhanteraren onSaveProductClick utlösas när man klickar på den:

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

När vi skapar en ny produkt behöver vi ett nytt id för den. Vi kommer att generera det med hjälp av den välkända biblioteket nanoid. Förresten, den behöver inte installeras, eftersom den redan medföljer RTK-paketet. Låt oss lägga till nanoid i importen:

import { nanoid } from '@reduxjs/toolkit'

Vi kommer också ihåg att det enda sättet att ändra state är att anropa metoden dispatch, som finns i store och skicka med ett action-objekt. För att komma åt den här metoden kommer vi att använda React-Redux-hooken useDispatch. Låt oss importera den också:

import { useDispatch } from 'react-redux'

I koden för funktionen NewProductForm skapar vi en konstant dispatch för den direkt efter att vi har skapat konstanterna för våra lokala tillstånd:

const dispatch = useDispatch()

Vi måste också importera action creator productAdded, som vi fick i förra lektionen:

import { productAdded } from './productsSlice'

Nu kan vi skriva själva funktionen för hanteraren onSaveProductClick. Låt oss göra detta före kommandot return:

const onSaveProductClick = () => {}

Inuti funktionen anropar vi dispatch, skapar ett action-objekt, där i egenskapen payload hamnar det genererade id:t, namnet, beskrivningen, priset och antalet produkter. Vi tar alla dessa data från de lokala tillstånden. Samtidigt kontrollerar vi i början i ett villkor om alla fält är ifyllda - bara i så fall anropar vi dispatch. I slutet av funktionens kod återställer vi de lokala tillstånden till utgångsläget:

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

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

Låt oss nu starta vår applikation, ange data i formulärfälten och klicka på spara-knappen. Hurra, en ny produkt har dykt upp längst ner på sidan. Om vi öppnar Redux DevTools, och där fliken Inspector, ser vi att till vänster förutom @@INIT finns nu även vår action products/productAdded. Och i den högra delen kan vi klicka på flikarna Action och State, samtidigt som vi växlar mellan @@INIT och products/productAdded. Nu ser vi att vår nya produkt läggs till. På fliken Action kan vi också se action:en som genererats automatiskt med createSlice (klicka till exempel på Raw). Hurra: vi behövde inte skriva den för hand.

Öppna din studentapplikation, och sedan filen NewStudentForm.jsx, lägg till en klickhanterare på spara-knappen.

Skriv alla nödvändiga importer och skriv funktionen onSaveStudentClick genom att använda metoden dispatch som visas i lektionen.

Starta applikationen, fyll i data i formuläret och klicka på spara-knappen. Se till att en ny student har lagts till längst ner på sidan.

Öppna Redux DevTools och gå igenom flikarna Action och State, se till att det nya studentobjektet läggs till. Titta på action-objektet som genererades för dig och skicka det som svar på den här uppgiften.