Invio di action nell'applicazione Redux

Ora abbiamo un reducer per aggiornare lo slice delle reazioni. Attualmente dobbiamo aggiungere l'invio di un'action, che verrà attivata quando l'utente fa clic sul pulsante di reazione. Ma prima, per far funzionare tutto completamente, dobbiamo apportare un paio di modifiche.

Apriamo la nostra applicazione di prodotti, e in essa il file productsSlice.js. Guardate la definizione di initialState. Vedete? Negli oggetti manca la proprietà per le reazioni. Sistemiamo questo, impostando i contatori per ciascuna reazione a 0:

{
	id: '1',
	title: 'Product1',
	desc: 'This is an amazing product',
	price: '300',
	amount: '30',
	reactions: {
		good: 0,
		soso: 0,
		bad: 0,
	},
},

Nel secondo oggetto per l'inizializzazione, aggiungete la proprietà reactions da soli. Questa stessa proprietà è necessaria aggiungerla più avanti nel codice per il reducer productAdded, in modo che anche i nuovi prodotti abbiano questa funzionalità. Facciamolo per il suo metodo prepare:

prepare(title, desc, price, amount, sellerId) {
	return {
		payload: {
			id: nanoid(),
			title,
			desc,
			price,
			amount,
			seller: sellerId,
			reactions: {
				good: 0,
				soso: 0,
				bad: 0,
			},
		},
	}
},

Ora passiamo all'invio dell'action. Apriamo il file UserReactions.jsx, poi importiamo in esso l'hook useDispatch e reactionClicked:

import { useDispatch } from 'react-redux'
import { reactionClicked } from './productsSlice'

All'inizio del codice nel corpo della funzione UserReactions prima riga (prima di const userReactions ... ) scriviamo:

const dispatch = useDispatch()

E aggiungiamo al pulsante di reazione l'invio di reactionClicked al clic, in questo modo verrà passato l'id del prodotto e il nome della reazione su cui si è cliccato:

<button
	key={name}
	type="button"
	className="reaction-button"
	onClick={() =>
		dispatch(reactionClicked({ productId: product.id, reaction: name }))
	}
>
	{image} {product.reactions[name]}
</button>

Ora ci resta da visualizzare il componente con le reazioni nel markup per le nostre pagine. Facciamolo nel file ProductsList.jsx prima dell'elemento Link:

<UserReactions product={product} />

E allo stesso modo prima dell'elemento Link nella pagina del prodotto nel file ProductPage.jsx:

<UserReactions product={product} />

Ora, quando tutto è al suo posto, possiamo avviare la nostra applicazione. Proviamo a cliccare sui pulsanti delle reazioni. Possiamo aggiungere un nuovo prodotto e anche cliccare su di essi. Ora, ovunque clicchiamo sui pulsanti delle reazioni, i valori modificati verranno visualizzati per quel prodotto su tutte le pagine. Guardate la pagina del singolo prodotto (dove avete cliccato sulle reazioni) e la pagina con la loro lista e viceversa, per tutte le pagine il numero di reazioni per un prodotto specifico sarà lo stesso.

Questa lezione è stata quella conclusiva del capitolo sul lavoro con i dati in Redux. Abbiamo lavorato più approfonditamente con i dati nel Redux store e ora sappiamo come aggiungere le funzionalità necessarie nell'applicazione e utilizzare i dati nei componenti React.

Aprite la vostra applicazione con gli studenti. Nel file studensSlice.js aggiungete agli oggetti per l'inizializzazione la proprietà votes con i rispettivi campi. Fatelo anche per il reducer studentAdded.

All'interno della funzione UserVotes nel file UserVotes.jsx definite dispatch per l'hook useDispatch e fate l'invio dell'action voteClicked al clic sui pulsanti di voto, passategli l'id dello studente e il nome del vote, similmente a quanto mostrato nella lezione.

Visualizzate i pulsanti per la votazione nel markup per i componenti StudentsList e StudentPage.