Afsendelse af action i Redux applikation

Nu har vi en reducer til opdatering af slice med reaktioner. Nu er vi nødt til at tilføje afsendelse af action, som vil blive udløst, når brugeren klikker på reaktionsknappen. Men først, for at få alt til at fungere korrekt, skal vi foretage et par ændringer.

Lad os åbne vores produktapplikation, og i den filen productsSlice.js. Se på definitionen af initialState. Kan du se? I objekterne mangler der en egenskab for reaktioner. Lad os rette dette ved at sætte tællere for hver af reaktionerne til 0:

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

Til det andet objekt for initialisering, tilføj egenskaben reactions selv. Denne samme egenskab er vi nødt til at tilføje nedenfor i koden for reduceren productAdded, så nye produkter også har denne funktionalitet. Lad os gø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,
			},
		},
	}
},

Lad os nu gå i gang med at sende actions. Åbn filen UserReactions.jsx, og importér hook useDispatch og reactionClicked:

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

I starten af koden i funktionens krop UserReactions som første linje (før const userReactions ... ) skriver vi:

const dispatch = useDispatch()

Og vi tilføjer til reaktionsknappen afsendelsen af reactionClicked ved klik, hvorved vi sender produktets id og navnet på den reaktion, der blev klikket på:

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

Nu mangler vi bare at vise komponenten med reaktioner i layoutet for vores sider. Lad os gøre dette i filen ProductsList.jsx før elementet Link:

<UserReactions product={product} />

Og på nøjagtig samme måde før elementet Link på produktsiden i filen ProductPage.jsx:

<UserReactions product={product} />

Nu hvor alt er på plads, kan vi starte vores applikation. Lad os prøve at klikke på reaktionsknapperne. Vi kan tilføje et nyt produkt og også trykke på dem. Nu, uanset hvor vi klikker på reaktionsknapperne, vil de ændrede værdier blive vist for dette produkt på alle sider. Se på den enkelte produktside (hvor du klikkede på reaktioner) og på siden med deres liste og omvendt, for alle sider vil antallet af reaktioner for et bestemt produkt være det samme.

Denne lektion var den afsluttende i kapitlet om arbejde med data i Redux. Vi arbejdede mere dybdegående med data i Redux store og ved nu, hvordan man tilføjer den nødvendige funktionalitet i applikationen og bruger data i React komponenter.

Åbn din applikation med studerende. I filen studensSlice.js skal du til objekterne for initialisering tilføje egenskaben votes med de relevante felter. Gør dette også for reduceren studentAdded.

Inde i funktionen UserVotes i filen UserVotes.jsx skal du oprette dispatch for hook useDispatch og lave en afsendelse af actionen voteClicked ved klik på afstemningsknapperne, send den studerendes id og navnet på vote, svarende til hvad der blev vist i lektionen.

Vis knapperne til afstemning i layoutet for komponenterne StudentsList og StudentPage.