Pošiljanje action in hook useDispatch v Redux

Izvedli smo skoraj vse sestavne dele za delovanje Redux aplikacije. Ostalo je samo še razumeti pošiljanje action iz React komponente. Pa začnimo.

Odprite našo aplikacijo s produkti. V formi komponente NewProductForm imamo gumb za shranjevanje podatkov novega produkta. Dodajmo mu obravnavalnik klika. Naj ob kliku nanj sproži obravnavalnik onSaveProductClick:

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

Pri ustvarjanju novega produkta bomo potrebovali nov id zanj. Ustvarili ga bomo z uporabo dobro znane knjižnice nanoid. Mimogrede, ni je treba namestiti, saj je že vključena v paket RTK. Dodajmo nanoid v uvoz:

import { nanoid } from '@reduxjs/toolkit'

Prav tako se spomnimo, da je edini način za spreminjanje state - klicati metodo dispatch, ki je na voljo v store in poslati objekt action. Da pridemo do te metode, bomo uporabili React-Redux hook useDispatch. Uvožimo ga:

import { useDispatch } from 'react-redux'

V kodi funkcije NewProductForm pripravimo zanj konstanto dispatch takoj za tem, ko smo pripravili konstante za naše lokalne state:

const dispatch = useDispatch()

Prav tako moramo uvoziti action creator productAdded, ki smo ga dobili v prejšnji lekciji:

import { productAdded } from './productsSlice'

Zdaj lahko napišemo samo funkcijo obravnavalnika onSaveProductClick. Naredimo to pred ukazom return:

const onSaveProductClick = () => {}

Znotraj funkcije kličemo dispatch, oblikujemo objekt action, v lastnost payload katerega bodo prišli ustvarjeni id, naziv, opis, cena in količina produkta. Vse te podatke vzamemo iz lokalnih state. Pri tem na začetku preverimo v pogoju so vsa polja izpolnjena - samo v tem primeru kličemo dispatch. Na koncu kode funkcije vrnemo lokalne state v začetno stanje:

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

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

Zdaj zaženemo našo aplikacijo, vnesemo podatke v polja obrazca in pritisnemo gumb shranjevanja. Hura, spodaj na strani se je pojavil nov produkt. Če odpremo Redux DevTools, in v njem zavihek Inspector, vidimo, da je levo poleg @@INIT pojavil še naš action products/productAdded. V desnem delu pa lahko klikamo po zavihkih Action in State, medtem ko preklapljamo med @@INIT in products/productAdded. Zdaj vidimo, da se naš nov produkt doda. Prav tako na zavihku Action vidimo action, samodejno ustvarjen z createSlice (kliknite, na primer, na Raw). Hura: ni nam ga bilo treba napisati ročno.

Odprite vašo aplikacijo s študenti, nato pa datoteko NewStudentForm.jsx, dodajte gumbu shranjevanja obravnavalnik klika.

Zapišite vse potrebne uvoze in napišite funkcijo-obravnavalnik onSaveStudentClick, z uporabo metode dispatch kot je prikazano v lekciji.

Zaženite aplikacijo, vnesite v polja obrazca podatke in pritisnite gumb shranjevanja. Prepričajte se, da se je na strani spodaj dodal nov študent.

Odprite Redux DevTools in pojdite po zavihkih Action in State, prepričajte se, da se nov objekt s študentom doda. Poglejte si objekt action, ki se je ustvaril, pošljite ga v odgovoru na to nalogo.