Dërgimi i action dhe hooku useDispatch në Redux

Ne kemi implementuar pothuajse të gjithë përbërësit për funksionimin e aplikacionit Redux. Mbetet vetëm të kuptojmë dërgimin e action nga komponenti React. Le të fillojmë.

Hapni aplikacionin tonë me produktet. Në formën e komponentit NewProductForm ne kemi një buton për të ruajtur të dhënat e produktit të ri. Le t'i vendosim një përpunues kliku. Le të ekzekutohet përpunuesi onSaveProductClick me klikun mbi të:

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

Gjatë krijimit të një produkti të ri, do të na duhet një id e re për të. Ne do ta gjenerojmë atë duke përdorur bibliotekën e njohur nanoid. Meqë ra fjala, nuk ka nevojë ta instaloni, sepse ajo vjen tashmë me paketin RTK. Le të shtojmë nanoid në import:

import { nanoid } from '@reduxjs/toolkit'

Gjithashtu kujtojmë se mënyra e vetme për të ndryshuar state - është të thirrim metodën dispatch, që e ka store dhe t'i kalojmë objektin action. Për të arritur këtë metodë, ne do të përdorim hookun e React-Redux useDispatch. Le ta importojmë edhe atë:

import { useDispatch } from 'react-redux'

Në kodin e funksionit NewProductForm le të krijojmë për të një konstante dispatch menjëherë pasi të kemi krijuar konstantet për state-t tona lokale:

const dispatch = useDispatch()

Gjithashtu na duhet të importojmë action creator-in productAdded, i cili u përftua në mësimin e kaluar:

import { productAdded } from './productsSlice'

Tani mund të shkruajmë vetë funksionin përpunues onSaveProductClick. Le ta bëjmë këtë përpara komandës return:

const onSaveProductClick = () => {}

Brenda funksionit ne e thirrim dispatch, formojmë objektin action, në vetinë payload të të cilit do të vendosen id e gjeneruar, emri, përshkrimi, çmimi dhe sasia e produktit. Të gjitha këto të dhëna i marrim nga state-t lokal. Në fillim kontrollojmë në kusht nëse të gjitha fushat janë plotësuar - vetëm në këtë rast e thirrim dispatch. Në fund të kodit të funksionit ne i kthejmë state-t lokal në gjendjen fillestare:

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

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

Tani le ta startojmë aplikacionin tonë, të vendosim të dhënat në fushat e formës dhe të klikojmë butonin e ruajtjes. Hura, në fund të faqes u shfaq një produkt i ri. Duke hapur Redux DevTools, dhe në të skedën Inspector, ne shohim se majtas përveç @@INIT u shfaq edhe action-i ynë products/productAdded. Në pjesën e djathtë ne mund të klikojmë në skedat Action dhe State, duke ndërruar në këtë rast @@INIT dhe products/productAdded. Tani shohim se produkti ynë i ri shtohet. Gjithashtu në skedën Action shohim action-in, të gjeneruar automatikisht me ndihmën e createSlice (klikoni, për shembull, në Raw). Hura: nuk na duhej ta shkruanim atë me dorë.

Hapni aplikacionin tuaj me studentët, e më pas skedarin NewStudentForm.jsx, vendosni në butonin e ruajtjes një përpunues kliku.

Shkruani të gjitha importet e nevojshme dhe shkruani funksionin-përpunues onSaveStudentClick, duke aplikuar metodën dispatch siç tregohet në mësim.

Startoni aplikacionin, vendosni në fushat e formës të dhënat dhe klikoni në butonin e ruajtjes. U bindeni që në fund të faqes u shtua një student i ri.

Hapni Redux DevTools dhe shfletoni nëpër skedat Action dhe State, u bindeni që objekti i ri me studentin shtohet. Shikoni objektin action që u gjenerua, dërgjeni atë në përgjigje të kësaj detyre.