Συζήτηση της λειτουργίας μιας εφαρμογής Redux

Στα προηγούμενα μαθήματα, υλοποιήσαμε όλα τα απαραίτητα στοιχεία για τη λειτουργία μιας εφαρμογής Redux. Ας κάνουμε μια σύνοψη και ας ανασκοπήσουμε εν συντομία τα κύρια στάδια λειτουργίας της εφαρμογής μας με τα προϊόντα.

Κατά την πρώτη εκκίνηση, η εφαρμογή μας ανακτά από το store μια λίστα με δύο προϊόντα χρησιμοποιώντας το useSelector και τα εμφανίζει στην οθόνη. Στην οθόνη εμφανίζεται επίσης μια φόρμα, όπου μπορούμε να εισάγουμε τα δεδομένα ενός νέου προϊόντος. Όταν ο χρήστης πατάει το κουμπί αποθήκευσης, ο χειριστής (handler) του κουμπιού αποστέλλει μία ενέργεια (action) productAdded, που περιέχει τα δεδομένα του νέου προϊόντος, τα οποία εισήγαγε ο χρήστης στη φόρμα. Η συνάρτηση-αναγωγέας (reducer), την οποία γράψαμε για το slice των προϊόντων, λαμβάνει αυτήν την ενέργεια και προσθέτει στον πίνακα με τα προϊόντα το αντικείμενο με το νέο προϊόν. Το store ειδοποιεί τα components ότι τα αποθηκευμένα δεδομένα state έχουν αλλάξει. Το component μας ProductsList διαβάζει τον τροποποιημένο πίνακα, προκαλεί την εμφάνιση (render), με αποτέλεσμα να βλέπουμε στη λίστα προϊόντων το προστιθέμενο προϊόν.

Τώρα ας ανοίξουμε τα Redux DevTools στο πρόγραμμα περιήγησης και ας προσθέσουμε στην εφαρμογή ένα ακόμη προϊόν, και στη συνέχεια ας δούμε την καρτέλα Log monitor, εδώ μπορούμε να δούμε πώς ήταν το state μας κατά την εκκίνηση της εφαρμογής, και πώς στη συνέχεια, μετά το πάτημα του κουμπιού αποθήκευσης, εμφανίστηκε μία ενέργεια (action). Μπορούμε να δούμε την ιδιότητα payload του και τις αλλαγές στο καθολικό state.

Στο επόμενο κεφάλαιο, θα δουλέψουμε πιο εμπεριστατωμένα με τα δεδομένα στην εφαρμογή Redux μας.