Trimiterea acțiunilor și hook-ul useDispatch în Redux

Am implementat aproape toate componentele necesare pentru funcționarea unei aplicații Redux. Rămâne doar să înțelegem cum să trimitem o acțiune dintr-un component React. Să începem.

Deschideți aplicația noastră cu produse. În forma componentului NewProductForm avem un buton pentru salvarea datelor noului produs. Să adăugăm un handler pentru click. Să declanșăm handler-ul onSaveProductClick la click pe el:

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

Pentru crearea unui produs nou, vom avea nevoie de un nou id. Îl vom genera folosind binecunoscuta bibliotecă nanoid. Apropo, nu trebuie să o instalați, deoarece deja este inclusă în pachetul RTK. Să adăugăm nanoid în import:

import { nanoid } from '@reduxjs/toolkit'

De asemenea, ne amintim că singura modalitate de a modifica state-ul este să apelăm metoda dispatch, care este disponibilă în store și să îi transmitem un obiect action. Pentru a accesa această metodă, vom folosi hook-ul React-Redux useDispatch. Să îl importăm:

import { useDispatch } from 'react-redux'

În codul funcției NewProductForm, să definim o constantă dispatch imediat după ce am definit constantele pentru state-urile noastre locale:

const dispatch = useDispatch()

De asemenea, trebuie să importăm action creator-ul productAdded, pe care l-am obținut în lecția precedentă:

import { productAdded } from './productsSlice'

Acum putem scrie funcția handler onSaveProductClick. Să o facem înainte de comanda return:

const onSaveProductClick = () => {}

În interiorul funcției, apelăm dispatch, formăm obiectul action, în proprietatea payload al căruia vor intra id-ul generat, numele, descrierea, prețul și cantitatea produsului. Toate aceste date le luăm din state-urile locale. În același timp, la început verificăm într-o condiție dacă toate câmpurile sunt completate - doar în acest caz apelăm dispatch. La sfârșitul codului funcției, returnăm state-urile locale la starea inițială:

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

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

Acum să pornim aplicația, să introducem date în câmpurile formularului și să apăsăm butonul de salvare. Ura, în partea de jos a paginii a apărut un produs nou. Deschizând Redux DevTools, și în el fila Inspector, vedem că în stânga în afară de @@INIT a apărut și acțiunea noastră products/productAdded. În partea dreaptă putem da click pe filele Action și State, comutând între @@INIT și products/productAdded. Acum vedem că noul nostru produs se adaugă. De asemenea, în fila Action vedem acțiunea, generată automat cu createSlice (dați click, de exemplu, pe Raw). Ura: nu a trebuit să o scriem manual.

Deschideți aplicația voastră cu studenți, apoi fișierul NewStudentForm.jsx, atașați butonului de salvare un handler pentru click.

Scrieți toate importurile necesare și scrieți funcția-handler onSaveStudentClick, aplicând metoda dispatch așa cum este arătat în lecție.

Porniți aplicația, introduceți în câmpurile formularului date și apăsați pe butonul de salvare. Asigurați-vă că în partea de jos a paginii s-a adăugat un nou student.

Deschideți Redux DevTools și parcurgeți filele Action și State, asigurați-vă că noul obiect cu studentul se adaugă. Uitați-vă la obiectul action care v-a fost generat, trimiteți-l în răspunsul la această sarcină.