Trimiterea acțiunilor în aplicația Redux

Acum avem un reducer pentru actualizarea slice-ului cu reacții. În acest moment, trebuie să adăugăm trimiterea unei acțiuni care să se declanșeze atunci când utilizatorul face clic pe butonul cu reacția. Dar mai întâi, pentru ca totul să funcționeze complet, trebuie să facem câteva modificări.

Să deschidem aplicația noastră cu produse, iar în ea fișierul productsSlice.js. Priviți definiția initialState. Vedeți? În obiecte nu există o proprietate cu reacții. Să reparăm asta, setând contoarele fiecărei reacții la 0:

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

În al doilea obiect pentru inițializare, adăugați proprietatea reactions singur. Această proprietate trebuie să fie adăugată mai jos în cod pentru reducer-ul productAdded, astfel încât noile produse să aibă și ele această funcționalitate. Să facem asta pentru metoda sa prepare:

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

Acum să începem trimiterea acțiunii. Să deschidem fișierul UserReactions.jsx, apoi să importăm în el hook-ul useDispatch și reactionClicked:

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

La începutul codului, în corpul funcției UserReactions, prima linie (înainte de const userReactions ... ) să scriem:

const dispatch = useDispatch()

Și să atașăm butonului de reacție trimiterea reactionClicked la clic, în acest caz va fi transmis id-ul produsului și numele reacției pe care s-a făcut clic:

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

Acum ne rămâne să afișăm componentul cu reacții în markup pentru paginile noastre. Să facem asta în fișierul ProductsList.jsx înaintea elementului Link:

<UserReactions product={product} />

Și exact la fel înaintea elementului Link pe pagina produsului în fișierul ProductPage.jsx:

<UserReactions product={product} />

Acum, când totul a fost pus la locul său, putem porni aplicația noastră. Să încercăm să facem clic pe butoanele cu reacții. Putem adăuga un produs nou și, de asemenea, să apăsăm pe ele. Acum, oriunde am face clic pe butoanele cu reacții, valorile modificate vor fi afișate pentru acest produs pe toate paginile. Priviți pagina produsului individual (pe care ați făcut clic pe reacții) și pagina cu lista lor și invers, pentru toate paginile, numărul de reacții pentru un anumit produs va fi același.

Această lecție a fost finală în capitolul despre lucrul cu date în Redux. Am lucrat mai aprofundat cu datele din Redux store și acum știm, cum să adăugăm funcționalitatea de care avem nevoie în aplicație și să folosim date în componentele React.

Deschideți aplicația voastră cu studenți. În fișierul studensSlice.js, obiectelor pentru inițializare adăugați proprietatea votes cu câmpurile corespunzătoare. Faceți asta și pentru reducer-ul studentAdded.

În interiorul funcției UserVotes din fișierul UserVotes.jsx, declarați dispatch pentru hook-ul useDispatch și faceți trimiterea acțiunii voteClicked la clic pe butoanele de votare, transmiteți -i id-ul studentului și numele vote, similar cu modul arătat în lecție.

Afișați butoanele pentru votare în markup pentru componentele StudentsList și StudentPage.