Aggiunta di un reducer all'applicazione Redux

Nella lezione precedente abbiamo creato il componente UserReaction in modo che ogni prodotto avesse anche le reazioni degli utenti. Ora dobbiamo scrivere un reducer che gestirà il contatore delle reazioni quando l'utente clicca il pulsante di una reazione specifica.

Apriamo la nostra applicazione di prodotti, e in essa il file productsSlice.js con tutti i reducer. Ora nella proprietà reducers creiamo un altro reducer reactionClicked (potremmo metterlo primo - prima di productAdded, anche se non fa differenza). Come al solito, passiamogli come parametri state e action:

reactionClicked(state, action) {},

E ora all'interno delle parentesi graffe, che abbiamo lasciato vuote nel passo precedente, scriviamo il codice per esso. Per prima cosa estraiamo l'id del prodotto dal payload dell'oggetto action e il nome della reazione:

const { productId, reaction } = action.payload

Poi dallo stato passato otteniamo il prodotto corrispondente:

const currentProduct = state.find(product => product.id === productId)

E se il prodotto esiste, incrementiamo il valore della reazione passata di 1:

if (currentProduct) {
	currentProduct.reactions[reaction]++
}

Questo è tutto, il nostro codice per reactionClicked è pronto:

reactionClicked(state, action) {
	const { productId, reaction } = action.payload
	const currentProduct = state.find(product => product.id === productId)
	if (currentProduct) {
		currentProduct.reactions[reaction]++
	}
},

Alla fine del file esportiamo l'action creator ottenuto:

export const {
	reactionClicked,
	productAdded,
	productUpdated
} = productsSlice.actions

Qui è necessario notare due punti importanti. Come ricordate dalle lezioni precedenti - aggiornare così direttamente il valore nel codice del reducer non è consentito (guardate questa riga: reactions[reaction]++), ma possiamo farla franca, perché lo stiamo facendo all'interno di createSlice, che utilizza la libreria Immer. Essa si preoccuperà di convertire il nostro codice in un aggiornamento "sicuro" del valore. Questo ci permette di scrivere cose complesse in modo più semplice.

La prossima cosa da ricordare è che l'oggetto action deve contenere la quantità minima possibile di informazioni - solo per indicare cosa è successo. Non bisogna eseguire in esso alcun calcolo. Tutti i calcoli per aggiornare lo stato devono essere fatti nel reducer, qui si può scrivere tutta la logica necessaria a questo scopo.

Aprite la vostra applicazione con gli studenti e nel file studentsSlice.js aggiungete un altro reducer voteClicked nel campo reducers, come mostrato nella lezione. Scrivete il codice per esso. Il compito del vostro reducer è - al click - incrementare il valore vote (o voto), su cui si è cliccato, per lo studente corrispondente, di 1.

Alla fine del file non dimenticate di esportare l'action creator ottenuto voteClicked.