Invio di action e hook useDispatch in Redux

Abbiamo implementato quasi tutti i componenti per il funzionamento di un'applicazione Redux. Resta solo da capire come inviare un'action da un componente React. Iniziamo.

Apri la nostra applicazione dei prodotti. Nel modulo del componente NewProductForm abbiamo un pulsante per salvare i dati del nuovo prodotto. Aggiungiamoci un gestore di click. Al click su di esso, deve essere attivato il gestore onSaveProductClick:

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

Per creare un nuovo prodotto, avremo bisogno di un nuovo id. Lo genereremo tramite la ben nota libreria nanoid. A proposito, non è necessario installarla, poiché è già inclusa nel pacchetto RTK. Aggiungiamo nanoid all'import:

import { nanoid } from '@reduxjs/toolkit'

Ricordiamo inoltre che l'unico modo per modificare lo state - è chiamare il metodo dispatch, che è presente nello store, e passare un oggetto action. Per accedere a questo metodo, useremo l'hook di React-Redux useDispatch. Importiamolo anche lui:

import { useDispatch } from 'react-redux'

Nel codice della funzione NewProductForm creiamo una costante dispatch subito dopo aver creato le costanti per i nostri state locali:

const dispatch = useDispatch()

Dobbiamo anche importare l'action creator productAdded, che abbiamo ottenuto nella lezione precedente:

import { productAdded } from './productsSlice'

Ora possiamo scrivere la funzione del gestore onSaveProductClick. Facciamolo prima del comando return:

const onSaveProductClick = () => {}

All'interno della funzione chiamiamo dispatch, formiamo l'oggetto action, nella proprietà payload inseriremo l'id generato, il nome, la descrizione, il prezzo e la quantità del prodotto. Prendiamo tutti questi dati dagli state locali. Controlliamo all'inizio con una condizione se tutti i campi sono compilati - solo in questo caso chiamiamo dispatch. Alla fine del codice della funzione riportiamo gli state locali allo stato iniziale:

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

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

Ora avviamo la nostra applicazione, inseriamo i dati nei campi del modulo e premiamo il pulsante di salvataggio. Evviva, in fondo alla pagina è apparso un nuovo prodotto. Aprendo Redux DevTools, e in esso la scheda Inspector, vediamo che a sinistra oltre a @@INIT è apparsa anche la nostra action products/productAdded. E nella parte destra possiamo cliccare sulle schede Action e State, alternando tra @@INIT e products/productAdded. Ora vediamo che il nostro nuovo prodotto viene aggiunto. Inoltre, nella scheda Action vediamo l'action, generato automaticamente con createSlice (clicca, ad esempio, su Raw). Evviva: non abbiamo dovuto scriverlo manualmente.

Apri la tua applicazione degli studenti, e poi il file NewStudentForm.jsx, aggiungi al pulsante di salvataggio un gestore di click.

Scrivi tutte le import necessarie e scrivi la funzione gestore onSaveStudentClick, applicando il metodo dispatch come mostrato nella lezione.

Avvia l'applicazione, inserisci nei campi del modulo i dati e clicca sul pulsante di salvataggio. Assicurati che in fondo alla pagina sia stato aggiunto un nuovo studente.

Apri Redux DevTools ed esplora le schede Action e State, assicurati che il nuovo oggetto studente venga aggiunto. Guarda l'oggetto action che è stato generato, invialo nella risposta a questo compito.