Slanje action-a i useDispatch hook u Redux-u

Implementirali smo praktično sve komponente za rad Redux aplikacije. Ostalo je samo da shvatimo kako da pošaljemo action iz React komponente. Počnimo.

Otvorite našu aplikaciju sa proizvodima. U formi komponente NewProductForm kod nas postoji dugme za čuvanje podataka novog proizvoda. Hajde da mu dodelimo handler klika. Neka po kliku na njega bude pozvan handler onSaveProductClick:

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

Prilikom kreiranja novog proizvoda trebaće nam za njega novi id. Generisaćemo ga pomoću poznate biblioteke nanoid. Inače, ne treba je instalirati, pošto ona već dolazi sa RTK paketom. Dodajmo nanoid u import:

import { nanoid } from '@reduxjs/toolkit'

Takođe, sećamo se da jedini način da promenimo state - je da pozovemo metod dispatch, koji postoji kod store-a i prosledimo objekat action. Da bismo došli do tog metoda, mi ćemo primeniti React-Redux hook useDispatch. Hajde da ga importujemo:

import { useDispatch } from 'react-redux'

U kodu funkcije NewProductForm definisaćemo za njega konstantu dispatch odmah nakon što smo definisali konstante za naše lokalne state-ove:

const dispatch = useDispatch()

Takođe nam je neophodno da importujemo action creator productAdded, koji smo dobili na prethodnoj lekciji:

import { productAdded } from './productsSlice'

Sada možemo da napišemo samu funkciju handler-a onSaveProductClick. Uradimo to pre komande return:

const onSaveProductClick = () => {}

Unutar funkcije pozivamo dispatch, formiramo objekat action, u svojstvo payload koga će ući generisani id, naziv, opis, cena i količina proizvoda. Sve ove podatke uzimamo iz lokalnih state-ova. Pored toga, na početku proveravamo u uslovu da li su sva polja popunjena - samo u tom slučaju pozivamo dispatch. Na kraju koda funkcije vraćamo lokalne state-ove u početno stanje:

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

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

Sada ćemo pokrenuti našu aplikaciju, uneti podatke u polja forme i kliknuti na dugme čuvanja. Ura, ispod na stranici pojavio se novi proizvod. Otvorivši Redux DevTools, a u njima karticu Inspector, vidimo da se levo pored @@INIT pojavio i naš action products/productAdded. A u desnom delu možemo da klikćemo po karticama Action i State, prebacujući pritom @@INIT i products/productAdded. Sada vidimo da se naš novi proizvod dodaje. Takođe na kartici Action vidimo action, generisan automatski pomoću createSlice (kliknite, na primer, na Raw). Ura: nije bilo potrebno da ga pišemo ručno.

Otvorite vašu aplikaciju sa studentima, a zatim fajl NewStudentForm.jsx, dodelite dugmetu čuvanja handler klika.

Napišite sve potrebne import-e i napišite funkciju-handler onSaveStudentClick, primenjujući metod dispatch kao što je pokazano u lekciji.

Pokrenite aplikaciju, unesite u polja forme podatke i kliknite na dugme čuvanja. Uverite se da se na stranici ispod dodao novi student.

Otvorite Redux DevTools i prođite kroz karice Action i State, uverite se da se novi objekat sa studentom dodaje. Pogledajte objekat action, koji vam je generisan, pošaljite ga u odgovoru na ovaj zadatak.