Tegevuse saatmine ja useDispatch konks Reduxis

Me oleme rakendanud peaaegu kõik Redux rakenduse tööks vajalikud komponendid. Jääb üle vaid mõista, kuidas saata tegevust React komponendist. Asume selle kallale.

Avage meie tooterakendus. Vormi komponendis NewProductForm on meil nupp uue toote andmete salvestamiseks. Paneme sellele käsitleja klõpsu peale. Las klõpsul sellel käivitub käsitleja onSaveProductClick:

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

Uue toote loomiseks vajame selle jaoks uut id-d. Me genereerime selle üldtuntud teeki abil nanoid. Muide, seda ei pea installima, kuna see tuleb juba RTK pakiga kaasa. Lisame nanoidi impordi:

import { nanoid } from '@reduxjs/toolkit'

Samuti mäletame, et ainus viis muuta state-i on kutsuda meetodit dispatch, mil on store ja edastada tegevuse objekt. Selle meetodini jõudmiseks me kasutame React-Redux konksu useDispatch. Impordime selle:

import { useDispatch } from 'react-redux'

Funktsiooni NewProductForm koodis loome selle jaoks konstandi dispatch kohe pärast seda, kui oleme loonud konstandid oma lokaalsetele seisunditele:

const dispatch = useDispatch()

Samuti peame importima action creator'i productAdded, mille sai eelmisel tunnil:

import { productAdded } from './productsSlice'

Nüüd saame kirjutada funktsiooni käsitleja onSaveProductClick. Teeme selle enne käsku return:

const onSaveProductClick = () => {}

Funktsiooni sees kutsume välja dispatch, loome tegevuse objekti, mille omadusse payload satub genereeritud id, nimi, kirjeldus, hind ja kogus toodet. Kõik need andmed võtame lokaalsetest seisunditest. Samas kontrollime me alguses tingimuses, kas kõik väljad on täidetud - ainult sel juhul kutsume välja dispatch. Lõpus funktsiooni koodis taastame lokaalsed seisundid algseisundisse:

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

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

Nüüd käivitame oma rakenduse, sisestame andmed vormi väljadele ja vajutame salvestusnuppu. Hurraa, lehe allosas ilmus uus toode. Avades Redux DevTools'i, ja selles vahekaardi Inspector, näeme, et vasakul peale @@INIT ilmus veel meie tegevus products/productAdded. Paremas osas saame klõpsata vahekaartidel Action ja State, vaheldumisi @@INIT ja products/productAdded. Nüüd näeme, et meie uus toode lisandub. Samuti vahekaardil Action näeme tegevust, mis on genereeritud automaatselt kasutades createSlice (klõpsake näiteks Raw peale). Hurraa: meil ei pidanud seda käsitsi kirjutama.

Avage oma üliõpilaste rakendus, seejärel fail NewStudentForm.jsx, pange salvestusnupule klõpsu käsitleja.

Kirjutage kõik vajalikud impordid ja kirjutage funktsioon-käsitleja onSaveStudentClick, rakendades meetodit dispatch nagu näidatud tunnis.

Käivitage rakendus, sisestage vormi väljadele andmed ja vajutage salvestusnupule. Veenduge, et lehe allosas lisandus uus üliõpilane.

Avage Redux DevTools ja minge läbi vahekaartide Action ja State, veenduge, et uus üliõpilase objekt lisandub. Vaadake tegevuse objekti, mis teile genereeriti, saatke see selle ülesande vastusena.