Versturen van een action in een Redux applicatie

Nu hebben we een reducer voor het bijwerken van de slice met reacties. Nu moeten we het versturen van een action toevoegen, die zal worden geactiveerd wanneer de gebruiker op de knop met een reactie klikt. Maar eerst, om alles volledig te laten werken, moeten we een paar aanpassingen maken.

Laten we onze productenapplicatie openen, en daarin het bestand productsSlice.js. Kijk naar de definitie van initialState. Zie je? In de objecten ontbreekt een eigenschap voor reacties. Laten we dit repareren door de tellers voor elk van de reacties in te stellen op 0:

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

Voeg in het tweede object voor initialisatie de eigenschap reactions zelf toe. Deze eigenschap moeten we ook hieronder toevoegen in de code voor de reducer productAdded, zodat nieuwe producten ook deze functionaliteit hebben. Laten we dit doen voor de methode prepare:

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

Laten we nu beginnen met het versturen van de action. Open het bestand UserReactions.jsx, importeer vervolgens de hook useDispatch en reactionClicked:

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

Begin in de code, in het lichaam van de functie UserReactions, met de eerste regel (vóór const userReactions ... ) schrijven we:

const dispatch = useDispatch()

En we voegen aan de reactieknop het versturen van reactionClicked toe bij een klik, hierbij wordt de id van het product en de naam van de reactie waarop geklikt is doorgegeven:

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

Nu hoeven we alleen nog maar de component met reacties in de weergave voor onze pagina's te tonen. Laten we dit doen in het bestand ProductsList.jsx vóór het element Link:

<UserReactions product={product} />

En precies zo vóór het element Link op de productpagina in het bestand ProductPage.jsx:

<UserReactions product={product} />

Nu, alles op zijn plaats staat, kunnen we onze applicatie starten. Laten we proberen te klikken op de knoppen met reacties. We kunnen een nieuw product toevoegen en ook daarop klikken. Nu, waar we ook klikken op de knoppen met reacties, de gewijzigde waarden worden voor dit product weergegeven op alle pagina's. Bekijk de pagina van het afzonderlijke product (waar je op reacties hebt geklikt) en de pagina met de lijst ervan en omgekeerd, voor alle pagina's zal het aantal reacties voor een specifiek product hetzelfde zijn.

Deze les was de afsluitende les in het hoofdstuk over het werken met gegevens in Redux. We hebben diepgaander gewerkt met gegevens in de Redux store en weten nu hoe we de benodigde functionaliteit kunnen toevoegen aan de applicatie en gegevens kunnen gebruiken in React componenten.

Open je applicatie met studenten. Voeg in het bestand studensSlice.js aan de objecten voor initialisatie de eigenschap votes toe met de bijbehorende velden. Doe dit ook voor de reducer studentAdded.

Binnen de functie UserVotes in het bestand UserVotes.jsx, definieer dispatch voor de hook useDispatch en zorg voor het versturen van de action voteClicked bij een klik op de stemknoppen, geef hiermee de id van de student en de naam van de vote door, vergelijkbaar met wat getoond is in de les.

Toon de knoppen voor het stemmen in de weergave voor de componenten StudentsList en StudentPage.