Skicka action i Redux-applikationen

Nu har vi en reducer för att uppdatera slice med reaktioner. Nu behöver vi lägga till att en action skickas, vilket kommer att utlösas när användaren klickar på en knapp med en reaktion. Men först, för att allt ska fungera helt, måste vi göra några ändringar.

Låt oss öppna vår produktapplikation, och i den filen productsSlice.js. Titta på definitionen av initialState. Ser du? I objekten finns ingen egenskap med reaktioner. Låt oss åtgärda detta genom att sätta räknarna för varje reaktion till 0:

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

Till det andra objektet för initiering, lägg till egenskapen reactions själv. Denna egenskap måste vi också lägga till längre ner i koden för reducern productAdded, så att nya produkter också har denna funktionalitet. Låt oss göra detta för dess metod prepare:

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

Nu ska vi börja med att skicka actions. Låt oss öppna filen UserReactions.jsx, sedan importera hooken useDispatch och reactionClicked i den:

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

I början av koden i funktionens kropp UserReactions på första raden (före const userReactions ... ) skriver vi:

const dispatch = useDispatch()

Och vi lägger till att skicka reactionClicked vid klick på reaktionsknappen, samtidigt som vi skickar med produktens id och namnet på reaktionen som klickades på:

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

Nu återstår det för oss att rendera komponenten med reaktioner i vyn för våra sidor. Låt oss göra detta i filen ProductsList.jsx före elementet Link:

<UserReactions product={product} />

Och precis på samma sätt före elementet Link på produktsidan i filen ProductPage.jsx:

<UserReactions product={product} />

Nu när allt har fallit på plats, kan vi starta vår applikation. Låt oss försöka klicka på reaktionsknapparna. Vi kan lägga till en ny produkt och även trycka på dem. Nu, oavsett var vi klickar på reaktionsknapparna, kommer de ändrade värdena att visas för denna produkt på alla sidor. Titta på sidan för en enskild produkt (där du klickade på reaktioner) och sidan med deras lista och tvärtom, för alla sidor kommer antalet reaktioner för en specifik produkt att vara detsamma.

Den här lektionen var den avslutande i kapitlet om att arbeta med data i Redux. Vi har arbetat mer fördjupat med data i Redux store och vet nu hur man lägger till den funktionalitet vi behöver i applikationen och använder data i React- komponenter.

Öppna din studentapplikation. I filen studensSlice.js, lägg till egenskapen votes till objekten för initiering med motsvarande fält. Gör detta även för reducern studentAdded.

Inuti funktionen UserVotes i filen UserVotes.jsx, skapa en dispatch för hooken useDispatch och gör en utskick av action voteClicked vid klick på omröstningsknapparna, skicka studentens id och namnet på vote, liknande hur det visas i lektionen.

Rendera knapparna för omröstning i vyn för komponenterna StudentsList och StudentPage.