Action nosūtīšana un useDispatch hooks Redux

Mēs esam ieviesti gandrīz visas sastāvdaļas Redux lietotnes darbībai. Atlika tikai izprast action nosūtīšanu no React komponenta. Sāksim.

Atveriet mūsu produktu lietotni. Komponenta NewProductForm formā mums ir poga, lai saglabātu jaunā produkta datus. Uzliksim tai klikšķa apstrādātāju. Kad uz tās noklikšķina, lai tiek aktivizēts apstrādātājs onSaveProductClick:

<button type="button" onClick={onSaveProductClick}>
	saglabāt
</button>

Veidojot jaunu produktu, mums būs nepieciešams tam jauns id. Mēs to ģenerēsim izmantojot vispārzināmo bibliotēku nanoid. Starp citu, tā nav jāinstalē, jo tā jau nāk kopā ar RTK pakotni. Pievienosim nanoid importam:

import { nanoid } from '@reduxjs/toolkit'

Mēs arī atceramies, ka vienīgais veids mainīt state - ir izsaukt metodi dispatch, kuru satur store un nodot action objektu. Lai piekļūtu šai metodei, mēs izmantosim React-Redux hook useDispatch. Importēsim to:

import { useDispatch } from 'react-redux'

Funkcijas NewProductForm kodā izveidosim tam konstantu dispatch uzreiz pēc tā, kad esam izveidojuši konstantes mūsu lokālajiem stāvokļiem:

const dispatch = useDispatch()

Mums arī jāimportē action creator productAdded, ko mēs saņēmām iepriekšējā nodarbībā:

import { productAdded } from './productsSlice'

Tagad mēs varam uzrakstīt pašu funkciju apstrādātāju onSaveProductClick. Izveidosim to pirms return komandas:

const onSaveProductClick = () => {}

Funkcijas iekšienē mēs izsaucam dispatch, veidojam action objektu, kura īpašībā payload nonāks ģenerētais id, nosaukums, apraksts, cena un daudzums produkta. Visus šos datus mēs ņemam no lokālajiem stāvokļiem. Tajā pašā laikā sākumā mēs pārbaudām nosacījumā, vai visi lauki ir aizpildīti - tikai šajā gadījumā izsaucam dispatch. Beigās funkcijas koda mēs atgriežam lokālos stāvokļus sākotnējā stāvoklī:

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

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

Tagad palaidīsim mūsu lietotni, ievadīsim datus formās laukos un nospiedīsim pogu saglabāšanai. Hurā, lapas apakšā parādījās jauns produkts. Atverot Redux DevTools, un tajā cilni Inspector, mēs redzam, ka kreisajā pusē bez @@INIT parādījās arī mūsu action products/productAdded. Labajā daļā mēs varam noklikšķināt uz cilnēm Action un State, pārslēdzot @@INIT un products/productAdded. Tagad mēs redzam, ka mūsu jaunais produkts tiek pievienots. Arī cilnē Action mēs redzam action, kas automātiski ģenerēts izmantojot createSlice (noklikšķiniet, piemēram, uz Raw). Hurā: mums tas nebija jāraksta manuāli.

Atveriet savu lietotni ar studentiem, pēc tam failu NewStudentForm.jsx, uzlikiet uz saglabāšanas pogas klikšķa apstrādātāju.

Ierakstiet visus nepieciešamos importus un uzrakstiet funkciju-apstrādātāju onSaveStudentClick, izmantojot metodi dispatch, kā parādīts nodarbībā.

Palaidiet lietotni, ievadiet formas laukos datus un nospiediet uz saglabāšanas pogas. Pārliecinieties, ka lapas apakšā pievienojās jauns students.

Atveriet Redux DevTools un pārejiet pa cilnēm Action un State, pārliecinieties, ka jaunais studenta objekts tiek pievienots. Apskatiet action objektu, kas jums ģenerējās, nosūtiet to atbildē uz šo uzdevumu.