Αποστολή action και hook useDispatch στο Redux

Έχουμε υλοποιήσει σχεδόν όλα τα συστατικά για τη λειτουργία μιας εφαρμογής Redux. Απομένει μόνο να κατανοήσουμε την αποστολή action από ένα React component. Ας ξεκινήσουμε.

Ανοίξτε την εφαρμογή μας με τα προϊόντα. Στο form του component NewProductForm έχουμε ένα κουμπί για αποθήκευση των δεδομένων του νέου προϊόντος. Ας προσθέσουμε έναν χειριστή γεγονότων στο κλικ. Αφήστε το να ενεργοποιεί τον χειριστή onSaveProductClick κατά το κλικ πάνω του:

<button type="button" onClick={onSaveProductClick}>
	αποθήκευση
</button>

Κατά τη δημιουργία ενός νέου προϊόντος, θα χρειαστούμε ένα νέο id για αυτό. Θα το παράγουμε χρησιμοποιώντας την παγκοσμίως γνωστή βιβλιοθήκη nanoid. Παρεμπιπτόντως, δεν χρειάζεται να την εγκαταστήσετε, αφού έρχεται ήδη με το πακέτο RTK. Ας προσθέσουμε την nanoid στις εισαγωγές:

import { nanoid } from '@reduxjs/toolkit'

Επίσης, θυμόμαστε ότι ο μόνος τρόπος να αλλάξουμε το state - είναι να καλέσουμε τη μέθοδο dispatch, που υπάρχει στο store και να περάσουμε το αντικείμενο action. Για να φτάσουμε σε αυτή τη μέθοδο, θα χρησιμοποιήσουμε το React-Redux hook useDispatch. Ας το εισάγουμε κι αυτό:

import { useDispatch } from 'react-redux'

Στον κώδικα της συνάρτησης NewProductForm ας δηλώσουμε μια σταθερά dispatch για αυτό αμέσως μετά την δήλωση των σταθερών για τα τοπικά μας states:

const dispatch = useDispatch()

Επίσης, πρέπει να εισάγουμε τον δημιουργό action productAdded, τον οποίο πήραμε στο προηγούμενο μάθημα:

import { productAdded } from './productsSlice'

Τώρα μπορούμε να γράψουμε την ίδια τη συνάρτηση χειριστή onSaveProductClick. Ας το κάνουμε πριν από την εντολή return:

const onSaveProductClick = () => {}

Μέσα στη συνάρτηση καλούμε το dispatch, σχηματίζουμε το αντικείμενο action, στην ιδιότητα payload του οποίου θα μπουν το παραγόμενο id, ο τίτλος, η περιγραφή, η τιμή και η ποσότητα του προϊόντος. Όλα αυτά τα δεδομένα τα παίρνουμε από τα τοπικά states. Παράλληλα, στην αρχή ελέγχουμε σε μια συνθήκη αν όλα τα πεδία είναι συμπληρωμένα - μόνο σε αυτή την περίπτωση καλούμε το dispatch. Στο τέλος του κώδικα της συνάρτησης επαναφέρουμε τα τοπικά states στην αρχική τους κατάσταση:

const onSaveProductClick = () => {
	if (name && desc && price && amount) {
		dispatch(
			productAdded({
				id: nanoid(),
				name,
				desc,
				price,
				amount
			})
		)

		setName('')
		setDesc('')
		setPrice(0)
		setAmount(0)
	}
}

Τώρα ας εκτελέσουμε την εφαρμογή μας, εισάγουμε δεδομένα στα πεδία της φόρμας και πατάμε το κουμπί αποθήκευσης. Ζήτω, στο κάτω μέρος της σελίδας εμφανίστηκε ένα νέο προϊόν. Ανοίγοντας τα Redux DevTools, και μέσα σε αυτά την καρτέλα Inspector, βλέπουμε ότι αριστερά εκτός από το @@INIT προστέθηκε και το δικό μας action products/productAdded. Και στο δεξί μέρος μπορούμε να κλικάρουμε στις καρτέλες Action και State, εναλλάσσοντας μεταξύ @@INIT και products/productAdded. Τώρα βλέπουμε ότι το νέο μας προϊόν προστίθεται. Επίσης, στην καρτέλα Action βλέπουμε το action, που δημιουργήθηκε αυτόματα με τη βοήθεια του createSlice (κλικάρετε, για παράδειγμα, στο Raw). Ζήτω: δεν χρειάστηκε να το γράψουμε χειροκίνητα.

Ανοίξτε την εφαρμογή σας με τους μαθητές, και στη συνέχεια το αρχείο NewStudentForm.jsx, προσθέστε στο κουμπί αποθήκευσης έναν χειριστή κλικ.

Γράψτε όλες τις απαραίτητες εισαγωγές και γράψτε τη συνάρτηση-χειριστή onSaveStudentClick, εφαρμόζοντας τη μέθοδο dispatch όπως φαίνεται στο μάθημα.

Εκτελέστε την εφαρμογή, εισάγετε στα πεδία της φόρμας δεδομένα και πατήστε στο κουμπί αποθήκευσης. Βεβαιωθείτε ότι στο κάτω μέρος της σελίδας προστέθηκε ένας νέος μαθητής.

Ανοίξτε τα Redux DevTools και περιηγηθείτε στις καρτέλες Action και State, βεβαιωθείτε ότι το νέο αντικείμενο με τον μαθητή προστίθεται. Κοιτάξτε το αντικείμενο action που δημιουργήθηκε, στείλτε το στην απάντηση για αυτή την εργασία.