Sending av action i Redux-applikasjonen

Nå har vi en reducer for å oppdatere slice med reaksjoner. Nå trenger vi å legge til sending av action, som vil utløses når brukeren klikker på en reaksjonsknapp. Men først, for at alt skal fungere fullstendig, må vi gjøre et par endringer.

La oss åpne vår produktapplikasjon, og i den filen productsSlice.js. Se på definisjonen av initialState. Ser du? I objektene mangler det en egenskap for reaksjoner. La oss ordne dette, ved å sette tellerne for hver av reaksjonene til 0:

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

I det andre objektet for initialisering, legg til egenskapen reactions selv. Denne egenskapen må vi også legge til lenger ned i koden for reduceren productAdded, så nye produkter også har denne funksjonaliteten. La oss gjøre dette for dens metode prepare:

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

La oss nå gå videre til sending av action. La oss åpne filen UserReactions.jsx, deretter importere hooken useDispatch og reactionClicked:

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

I begynnelsen av koden i kroppen av funksjonen UserReactions som første linje (før const userReactions ... ) skriver vi:

const dispatch = useDispatch()

Og legger til sending av reactionClicked på reaksjonsknappen ved klikk, hvor vi vil sende med produktets id og navnet på reaksjonen som ble klikket på:

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

Nå gjenstår det å vise komponenten med reaksjoner i renderingen for sidene våre. La oss gjøre dette i filen ProductsList.jsx før Link-elementet:

<UserReactions product={product} />

Og på nøyaktig samme måte før Link-elementet på produktsiden i filen ProductPage.jsx:

<UserReactions product={product} />

Nå, når alt er på plass, kan vi starte applikasjonen vår. La oss prøve å klikke på reaksjonsknappene. Vi kan legge til et nytt produkt og også trykke på dem. Nå, uansett hvor vi klikker på reaksjonsknappene, vil de endrede verdiene vises for det aktuelle produktet på alle sider. Se på siden for et enkelt produkt (der du klikket på reaksjoner) og siden med deres liste og omvendt, for alle sider vil antall reaksjoner for et spesifikt produkt være det samme.

Denne leksjonen var den avsluttende i kapittelet om arbeid med data i Redux. Vi jobbet mer inngående med data i Redux store og vet nå hvordan vi legger til nødvendig funksjonalitet i applikasjonen og bruker data i React komponenter.

Åpne applikasjonen din med studenter. I filen studensSlice.js, legg til egenskapen votes i objektene for initialisering med de tilhørende feltene. Gjør dette også for reduceren studentAdded.

Inne i funksjonen UserVotes i filen UserVotes.jsx, opprett dispatch for hooken useDispatch og gjør sending av actionen voteClicked ved klikk på avstemningsknappene, send studentens id og navnet på vote, på samme måte som vist i leksjonen.

Vis knappene for avstemning i renderingen for komponentene StudentsList og StudentPage.