Αποστολή action σε εφαρμογή Redux

Τώρα έχουμε έναν reducer για την ενημέρωση του slice με τις αντιδράσεις. Τώρα πρέπει να προσθέσουμε την αποστολή ενός action που θα ενεργοποιείται όταν ο χρήστης κάνει κλικ σε ένα κουμπί αντίδρασης. Αλλά πρώτα, για να λειτουργεί πλήρως, πρέπει να κάνουμε μερικές αλλαγές.

Ας ανοίξουμε την εφαρμογή μας με τα προϊόντα, και σε αυτή το αρχείο productsSlice.js. Κοιτάξτε τον ορισμό του initialState. Βλέπετε; Στα αντικείμενα δεν υπάρχει ιδιότητα με αντιδράσεις. Ας το διορθώσουμε, ορίζοντας τους μετρητές κάθε αντίδρασης σε 0:

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

Στο δεύτερο αντικείμενο για την αρχικοποίηση, προσθέστε την ιδιότητα reactions μόνοι σας. Αυτή η ιδιότητα πρέπει να προστεθεί και παρακάτω στον κώδικα για τον reducer productAdded, ώστε και τα νέα προϊόντα να έχουν αυτή τη λειτουργικότητα. Ας το κάνουμε για τη μέθοδό του prepare:

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

Τώρα ας προχωρήσουμε στην αποστολή του action. Ας ανοίξουμε το αρχείο UserReactions.jsx, στη συνέχεια να εισάγουμε σε αυτό το hook useDispatch και το reactionClicked:

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

Στην αρχή του κώδικα στο σώμα της συνάρτησης UserReactions στην πρώτη γραμμή (πριν από το const userReactions ... ) ας γράψουμε:

const dispatch = useDispatch()

Και θα προσθέσουμε στο κουμπί αντίδρασης την αποστολή του reactionClicked όταν γίνει κλικ, όπου θα μεταβιβάζεται το id του προϊόντος και το όνομα της αντίδρασης στην οποία έγινε κλικ:

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

Τώρα μας μένει να εμφανίσουμε το component με τις αντιδράσεις στο markup για τις σελίδες μας. Ας το κάνουμε στο αρχείο ProductsList.jsx πριν από το στοιχείο Link:

<UserReactions product={product} />

Και ακριβώς το ίδιο πριν από το στοιχείο Link στη σελίδα του προϊόντος στο αρχείο ProductPage.jsx:

<UserReactions product={product} />

Τώρα, που όλα μπήκαν στη θέση τους, μπορούμε να εκκινήσουμε την εφαρμογή μας. Ας δοκιμάσουμε να κάνουμε κλικ στα κουμπιά με τις αντιδράσεις. Μπορούμε να προσθέσουμε ένα νέο προϊόν και επίσης να πατήσουμε πάνω τους. Τώρα, όπου και αν κάνουμε κλικ στα κουμπιά με τις αντιδράσεις, οι τροποποιημένες τιμές θα εμφανίζονται για αυτό το προϊόν σε όλες τις σελίδες. Κοιτάξτε τη σελίδα του μεμονωμένου προϊόντος (στην οποία κάνατε κλικ στις αντιδράσεις) και τη σελίδα με τη λίστα τους και αντίστροφα, για όλες τις σελίδες ο αριθμός των αντιδράσεων για το συγκεκριμένο προϊόν θα είναι ο ίδιος.

Αυτό το μάθημα ήταν το τελευταίο στο κεφάλαιο για την εργασία με δεδομένα στο Redux. Δουλέψαμε πιο εις βάθος με δεδομένα στο Redux store και τώρα γνωρίζουμε, πώς να προσθέτουμε τη λειτουργικότητα που χρειαζόμαστε στην εφαρμογή και να χρησιμοποιούμε δεδομένα σε React components.

Ανοίξτε την εφαρμογή σας με τους μαθητές. Στο αρχείο studensSlice.js στα αντικείμενα για την αρχικοποίηση προσθέστε την ιδιότητα votes με τα αντίστοιχα πεδία. Κάντε αυτό και για τον reducer studentAdded.

Μέσα στη συνάρτηση UserVotes στο αρχείο UserVotes.jsx δημιουργήστε το dispatch για το hook useDispatch και κάντε αποστολή του action voteClicked με κλικ στα κουμπιά ψηφοφορίας, μεταβιβάστε του το id του μαθητή και το όνομα του vote, παρόμοια με αυτό που φαίνεται στο μάθημα.

Εμφανίστε τα κουμπιά για ψηφοφορία στο markup για τα components StudentsList και StudentPage.