Reducers στο Redux

Στο προηγούμενο μάθημα, χρησιμοποιώντας τη συνάρτηση createSlice δημιουργήσαμε ένα slice για τα προϊόντα products και ένα reducer που θα ενημερώνει αυτό το slice, που είναι αποθηκευμένο στο store. Θυμίζω για άλλη μια φορά, ότι στο Redux τα δεδομένα της κατάστασης αλλάζουν με τη βοήθεια των reducers.

Πρέπει να θυμόμαστε ότι οι reducers έχουν μια σειρά από περιορισμούς. Ο reducer ενημερώνει την κατάσταση μόνο με βάση τις λαμβανόμενες τιμές της τρέχουσας κατάστασης και του αντικειμένου action, και στη συνέχεια αποφασίζει, πώς να αλλάξει την κατάσταση και επιστρέφει τη νέα της τιμή.

Γνωρίζουμε ότι από προεπιλογή τα αντικείμενα και οι πίνακες στη JavaScript είναι μεταβλητά (mutable). Επίσης γνωρίζουμε ότι δεν μπορούμε να αλλάξουμε το state απευθείας, σε μια τέτοια περίπτωση πρέπει να δουλεύουμε μόνο με αντίγραφα. Αυτός ο κανόνας πρέπει να ακολουθείται και από τον reducer. Αλλά το να γράφουμε τέτοια λογική χειροκίνητα μπορεί να είναι αρκετά κουραστικό και δύσκολο έργο, και εδώ έρχεται να βοηθήσει η συνάρτηση createSlice, η οποία χρησιμοποιεί τη βιβλιοθήκη Immer, που μετατρέπει τον 'μεταβλητό' κώδικά σας σε 'αμετάβλητο'. Έτσι, μπορούμε να αμαρτάνουμε και να απλοποιούμε τη ζωή μόνο όταν χρησιμοποιούμε τις συναρτήσεις createSlice ή createReducer.

Στους περιορισμούς του reducer περιλαμβάνεται επίσης η χρήση ασύγχρονης λογικής, ο υπολογισμός τυχαίων τιμών και η εκτέλεση άλλων "παραπλευρικών effects". Και τώρα, αφού γνωριστήκαμε με τον reducer πιο κοντά, ας επιστρέψουμε στην εφαρμογή μας με τα προϊόντα.

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

Τώρα ως reducer μπορούμε να ορίσουμε την εισαγμένη συνάρτηση productsReducer:

Με την παραπάνω γραμμή λέμε στο store μας ότι τώρα όταν προκύψει ένα action όλα τα δεδομένα για το slice state.products θα ενημερώνονται από τον reducer productsReducer.

Τώρα μπορείτε να εκκινήσετε την εφαρμογή (παρατηρήστε, ότι στην κονσόλα εξαφανίστηκε η προειδοποίηση για μη έγκυρο reducer!), να ανοίξετε τα Redux DevTools στο πρόγραμμα περιήγησης και να περιηγηθείτε στις καρτέλες του. Για παράδειγμα, πατώντας στην καρτέλα State στην καρτέλα Inspector μπορούμε να δούμε τα δύο αντικείμενά μας με προϊόντα, τα οποία εμφανίστηκαν ως αρχική τιμή της κατάστασης κατά την πρώτη εκκίνηση της εφαρμογής. Στην καρτέλα Log monitor βλέπουμε ποια slices περιέχει το καθολικό state - αυτό είναι το slice products, που περιλαμβάνει δύο αντικείμενα. Επίσης, ρίξτε μια ματιά στην καρτέλα Chart.