Ένας οδηγός για αρχάριους στο Redux

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

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

Το παράδειγμα που θα ακολουθήσουμε σε αυτόν τον οδηγό θα είναι μια απλή εφαρμογή todo. Η εφαρμογή επιτρέπει σε έναν χρήστη να προσθέτει ή να αφαιρεί στοιχεία που πρέπει να κάνει και να τα βλέπει να εμφανίζονται στη σελίδα.

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

Περίληψη βημάτων

  1. Γράψτε τη λειτουργία μειωτή
  2. Εγκαταστήστε το κατάστημα στο ριζικό στοιχείο
  3. Τυλίξτε τα εξαρτήματα με το εξάρτημα, περνώντας στο κατάστημα ως στήριγμα
  4. Γράψτε το στοιχείο
  5. Ορίστε τις ενέργειες
  6. Καθορίστε την αποστολή, επισυνάψτε τις εκεί όπου θα ενεργοποιηθούν οι αποστολές (π.χ. ακροατές συμβάντων κ.λπ.)
  7. Ορίστε τη συνάρτηση mapStateToProps
  8. Εξαγάγετε τη συνάρτηση σύνδεσης, περνώντας στο mapStateToProps και null ως τα ορίσματα 2 και μεταβιβάζοντας το όνομα του στοιχείου στο δεύτερο ζεύγος αγκυλών

Βήματα

1. Γράψτε τη λειτουργία μειωτή

Η λειτουργία μειωτή είναι μια συνάρτηση που λέει στο κατάστημα πώς να ανταποκρίνεται σε ενέργειες. Η συνάρτηση επιστρέφει τη νέα και ενημερωμένη κατάσταση κάθε φορά που αποστέλλεται μια ενέργεια. Η κατάσταση είναι αμετάβλητη (δεν μπορεί να αλλάξει) οπότε ο μειωτής επιστρέφει πάντα μια νέα κατάσταση. Ο μειωτής χρησιμοποιεί συνήθως τον τελεστή εξάπλωσης για να εισάγει την τρέχουσα κατάσταση σε ένα νέο αντικείμενο / πίνακα και να προσαρτά σε αυτόν. Συνήθης πρακτική είναι να χρησιμοποιήσετε μια δήλωση διακόπτη / περίπτωσης και να ελέγξετε την ιδιότητα τύπου της ενέργειας που μεταβιβάστηκε. Στη συνέχεια, γράψτε τον κωδικό που ενημερώνει την κατάσταση για κάθε περίπτωση.

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

Προς το παρόν, γνωρίζετε ότι η εφαρμογή todo θα πρέπει να αλληλεπιδράσει με το κατάστημα με δύο τρόπους: για να προσθέσετε ένα νέο στοιχείο todo στην πολιτεία και να αφαιρέσετε ένα στοιχείο todo από την πολιτεία. Γι 'αυτό γράφουμε τη λειτουργία μας έτσι ώστε να ανταποκρίνεται σε 2 περιπτώσεις του τύπου δράσης. Χρησιμοποιεί την τιμή ενέργειας για να προσθέσει ή να αφαιρέσει ένα στοιχείο εκκρεμότητας από την πολιτεία.

Ο μειωτής περνά 2 παραμέτρους: κατάσταση (αυτή είναι ολόκληρη η κατάσταση που βρίσκεται στο κατάστημα και της δίνουμε μια προεπιλεγμένη τιμή εάν η κατάσταση δεν υπάρχει ακόμα) και η ενέργεια. Επιστρέφουμε την κατάσταση στην προεπιλεγμένη περίπτωση.

2. Εγκαταστήστε το κατάστημα στο ριζικό στοιχείο

Το κατάστημα είναι το πράγμα που περιέχει πραγματικά την κατάσταση σε αυτό. Είναι λίγο μαγικό και δεν χρειάζεται πραγματικά να ξέρετε τα σκαμπανεβάσματα. Το μόνο που πρέπει να γνωρίζετε είναι ότι δεν έχετε άμεση πρόσβαση όπως θα κάνατε σε κανονική κατάσταση React. Έχετε πρόσβαση σε αυτό και κάνετε αλλαγές σε αυτό χρησιμοποιώντας μειωτήρες, ενέργειες και αποστολή.

Το άλλο σημαντικό πράγμα που πρέπει να γνωρίζετε για το κατάστημα είναι ότι περιέχει μερικές χρήσιμες και σημαντικές μεθόδους. Η κύρια μέθοδος είναι η λειτουργία αποστολής. Περιέχει επίσης μια μέθοδο getState (για προβολή της κατάστασης) και μέθοδο εγγραφής (εκτελεί μια επιστροφή κλήσης κάθε φορά που αποστέλλεται μια ενέργεια).

Το κατάστημα συνήθως δημιουργείται στη ρίζα της εφαρμογής σας (π.χ. App.js). Αποθηκεύεται ως μεταβλητή και ο μειωτής περνά ως παράμετρος. Στη συνέχεια, το κατάστημα παραδίδεται ως στήριγμα στο στοιχείο Παροχέα.

Φτιάχνουμε το αντικείμενο του καταστήματός μας που περνά στον μειωτή που μόλις δημιουργήσαμε.

3. Τυλίξτε τα εξαρτήματα με το εξάρτημα, περνώντας στο κατάστημα ως στήριγμα

Ο Πάροχος είναι ένα στοιχείο που δημιουργήθηκε για να διευκολύνει τη μεταφορά του καταστήματος σε όλα τα στοιχεία σας. Το στοιχείο του Παροχέα περιτυλίγει όλα τα στοιχεία σας (π.χ. καταστήστε τα στοιχεία σας ως παιδιά του Παροχέα) Περνάτε το κατάστημα ως στήριγμα μόνο στον Πάροχο. Αυτό σημαίνει ότι δεν χρειάζεται να περάσετε στο κατάστημα ως στήριγμα σε κάθε στοιχείο καθώς κάθε στοιχείο το παίρνει από τον Πάροχο. Ωστόσο, αυτό δεν σημαίνει ότι τα στοιχεία έχουν πρόσβαση στην κατάσταση ακόμα. Πρέπει να χρησιμοποιήσετε το mapStateToProps (θα το καλύψουμε αργότερα) για να έχετε πρόσβαση στην κατάσταση στο στοιχείο σας.

Τυλίγουμε το στοιχείο Todo που πρόκειται να φτιάξουμε με το στοιχείο Παροχέα μας. Περνάμε στο κατάστημα που δημιουργήσαμε στο προηγούμενο βήμα.

4. Γράψτε το στοιχείο

Στη συνέχεια, αρχίζουμε να γράφουμε το στοιχείο Todo, το οποίο θα αποδίδει τα στοιχεία todo και θα αλληλεπιδρά με το κατάστημα Redux.

Το στοιχείο είναι ένα συστατικό στοιχείο που περιέχει ένα στοιχείο κατάστασης για να παρακολουθεί τι έχει πληκτρολογήσει ο χρήστης στην είσοδο. Έχουμε μια λειτουργία που ονομάζεται handleChange. Αυτή η λειτουργία ενημερώνει την κατάσταση κάθε φορά που ο χρήστης πληκτρολογεί οτιδήποτε στην είσοδο. Μέχρι στιγμής αυτό θα γράψουμε. Πρέπει να καταλάβουμε περισσότερα για το Redux για να μπορέσουμε να γράψουμε τη λογική. Η λογική θα προσθέσει νέα todos στην κατάσταση και θα ανακτήσει τα τρέχοντα από την πολιτεία για απόδοση στη σελίδα.

5. Ορίστε τις ενέργειες

Μια ενέργεια είναι ένα απλό αντικείμενο που περιέχει μια ιδιότητα που ονομάζεται «τύπος». Αυτό το αντικείμενο μεταφέρεται στη συνάρτηση αποστολής. Χρησιμοποιείται για να πει στο κατάστημα ποιο συμβάν μόλις συνέβη (διαβάζοντας την ιδιότητα τύπου ενεργειών). Αναφέρει επίσης τι ενημέρωση πρέπει να κάνει στην κατάσταση ως απόκριση (μέσω της λειτουργίας μειωτή). Η ενέργεια μπορεί επίσης να περιέχει άλλες ιδιότητες για οποιαδήποτε άλλα δεδομένα θέλετε να μεταβιβάσετε στον μειωτή. Τα δεδομένα μπορούν να περάσουν μόνο εδώ, οπότε τυχόν δεδομένα που απαιτούνται θα πρέπει να διαβιβαστούν εδώ.

Θα χρησιμοποιήσουμε δημιουργούς δράσης για να καθορίσουμε τις ενέργειές μας. Οι δημιουργοί δράσης είναι μια συνάρτηση που επιστρέφει το αντικείμενο δράσης. Σκοπός του είναι να κάνει τη δράση πιο φορητή και δοκιμή. Δεν αλλάζει τη συμπεριφορά του πώς λειτουργεί κάτι. Είναι μια άλλη μέθοδος γραφής και μετάδοσης της δράσης. Σας επιτρέπει επίσης να μεταβιβάσετε παραμέτρους εάν θέλετε να στείλετε δεδομένα με την ενέργεια που θα κάνουμε. Επομένως, πρέπει να χρησιμοποιήσουμε τους δημιουργούς δράσης εδώ.

Αν θυμάστε, ο μειωτής μας απάντησε σε 2 τύπους ενεργειών - "ADD_TODO" και "REMOVE_TODO". Θα καθορίσουμε αυτές τις ενέργειες με τους δημιουργούς δράσης μας. Στην ενέργεια add_todo θα επιστρέψουμε το "ADD_TODO" ως τον τύπο και το στοιχείο εκκρεμότητας που θέλουμε να προσθέσουμε στο κατάστημα ως τιμή (χρειαζόμαστε το κατάστημα να προσθέσει αυτό το στοιχείο todo στην πολιτεία, ώστε να περάσει εδώ). Στο remove_todo επιστρέφουμε το "REMOVE_TODO" ως τον τύπο και το ευρετήριο του αντικειμένου todo στο κατάστημα ως τιμή. Θα το χρειαζόμαστε για να το καταργήσουμε από τη λίστα των todos.

Εάν επιστρέψετε στον ορισμό της λειτουργίας μειωτή, ελπίζουμε να έχει πλέον νόημα. Με την ανάγνωση του action.type ο μειωτής ξέρει αν πρέπει να προσθέσει ένα todo στην κατάσταση ή να αφαιρέσει ένα από αυτό. Έχει το στοιχείο todo που έχει περάσει στο add_todo. Προσαρμόζεται στην τρέχουσα κατάσταση χρησιμοποιώντας τον τελεστή επέκτασης. Στο remove_todo χρησιμοποιεί τον τελεστή επέκτασης για να δημιουργήσει έναν νέο πίνακα που προσαρτά την τρέχουσα κατάσταση σε δύο φορές, μία φορά με όλα τα στοιχεία πριν από την κατάργηση και δεύτερη με όλα τα στοιχεία μετά την αφαίρεση, δημιουργώντας έτσι το νέο αντικείμενο κατάστασης με το το αντικείμενο εκκρεμεί.

Ωστόσο, αυτό δεν είναι ακόμη πλήρης εικόνα. Δεν έχουμε ακόμη καλύψει τον τρόπο με τον οποίο ο μειωτής καλείται και περνά στη σωστή ενέργεια. Για αυτό, θα πρέπει να προχωρήσουμε για να καθορίσουμε τη λειτουργία αποστολής μας.

6. Καθορίστε την αποστολή, επισυνάψτε τις εκεί όπου θα ενεργοποιηθούν οι αποστολές (π.χ. ακροατές συμβάντων κ.λπ.)

Η συνάρτηση αποστολής είναι μια μέθοδος του καταστήματος που χρησιμοποιείται για να προκαλέσει μια αλλαγή στην κατάσταση. Οποιοδήποτε συμβάν ή οτιδήποτε χρειάζεται να ενημερώσει την κατάσταση πρέπει να καλέσει τη μέθοδο αποστολής για να το κάνει. Αυτός είναι ο μόνος τρόπος για να ενεργοποιήσετε μια αλλαγή / ενημέρωση στην κατάσταση. Η αποστολή καλείται και το αντικείμενο δράσης μεταβιβάζεται (ή ο δημιουργός δράσης εάν χρησιμοποιήθηκε). Μόλις ενεργοποιηθεί μια αποστολή, το κατάστημα καλεί στη συνέχεια τη λειτουργία μειωτή και περνά στην ενέργεια που παρείχε η αποστολή η οποία ενημερώνει την κατάσταση, όπως έχουμε δει νωρίτερα.

Παρακάτω ορίζουμε το κάτω μισό της μεθόδου απόδοσης στοιχείων. Δημιουργούμε τα κουμπιά μας που θα περιέχουν τους χειριστές των εκδηλώσεών μας. Μέσα σε αυτά, θα καθορίσουμε τις λειτουργίες αποστολής μας.

Το πρώτο κουμπί είναι ένα απλό κουμπί προσθήκης. Αυτό το κουμπί θα αποστείλει την ενέργεια add_todo στο κατάστημα. Θα περάσει στην τρέχουσα είσοδο χρήστη ως η τιμή (αυτό είναι το στοιχείο εκκρεμών εργασιών που ο μειωτής προσαρτά στη νέα κατάσταση). Σημειώστε ότι ονομάζουμε αποστολή ως this.props.dispatch. Είναι λίγο έξω από το πεδίο εφαρμογής αυτού του οδηγού για να καταλάβουμε πώς και γιατί αυτό περνά ως στήριγμα του στοιχείου. Λοιπόν, ξέρετε ότι το κάνει και μπορούμε να το ονομάσουμε έτσι.

Ο δεύτερος χειριστής συμβάντων γράφεται ως onClick στο τεκμηριωμένο αντικείμενο εκκρεμούσας. Κάνοντας κλικ σε οποιοδήποτε στοιχείο εκκρεμοτήτων στη σελίδα ενεργοποιεί ένα πρόγραμμα χειρισμού συμβάντων. Ο χειριστής συμβάντων αναζητά τη λίστα των todos και βρίσκει τον κατάλογο αυτού του todo στη λίστα. Στη συνέχεια αποστέλλει την ενέργεια remove_todo και περνά στο ευρετήριο.

Ο κύκλος για τον τρόπο ενημέρωσης της κατάστασης στο κατάστημα Redux έχει πλέον οριστεί πλήρως. Γνωρίζουμε ότι όποτε θέλουμε να αλλάξουμε την κατάσταση πρέπει να καλέσουμε τη μέθοδο αποστολής, να περάσουμε στην κατάλληλη ενέργεια και να διασφαλίσουμε ότι ο μειωτής μας χειρίζεται αυτές τις ενέργειες και επιστρέφει τη νέα κατάσταση χρησιμοποιώντας οποιεσδήποτε τιμές περάσαμε μέσω της ενέργειας.

Το μόνο κομμάτι του παζλ που λείπει τώρα είναι πώς παίρνουμε την κατάσταση από το κατάστημα Redux. Ίσως έχετε παρατηρήσει ότι έχω χαρτογραφήσει μια λίστα που ονομάζεται this.props.todosστο προηγούμενο παράδειγμα. Ίσως αναρωτιέστε από πού προήλθε. Μπορεί επίσης να θυμηθείτε στην αρχή αυτού του οδηγού που ανέφερα ότι το πέρασμα του καταστήματος στο στοιχείο Παροχέα δεν αρκεί για να αποκτήσετε πρόσβαση στην κατάσταση του καταστήματος. Όλα αυτά αντιμετωπίζονται στα επόμενα 2 βήματα καθώς ορίζουμε τη λειτουργία mapStateToProps και τη μεταφέρουμε στη λειτουργία σύνδεσης.

7. Ορίστε τη λειτουργία mapStateToProps

Όταν θέλετε το στοιχείο σας να έχει πρόσβαση στην κατάσταση, πρέπει να καθορίσετε ρητά σε ποια κατάσταση θα έχει πρόσβαση το στοιχείο. Το στοιχείο σας δεν θα έχει πρόσβαση σε κατάσταση χωρίς αυτό.

mapStateToProps είναι μια συνάρτηση που απλώς επιστρέφει ένα αντικείμενο που καθορίζει ποια κατάσταση θα πρέπει να περάσει στο στοιχείο, εκχωρώντας τιμές στην κατάσταση σε ιδιότητες που ορίζετε σε αυτό το αντικείμενο. Ουσιαστικά, το αντικείμενο που επιστρέφετε στο mapStateToProps είναι αυτό που θα στηρίζει το στοιχείο σας. Η συνάρτηση mapStateToProps μεταφέρεται στη μέθοδο σύνδεσης ως το πρώτο όρισμα.

Το mapStateToProps παίρνει ολόκληρη την κατάσταση ως παράμετρο και παίρνετε μόνο αυτό που χρειάζεστε από αυτήν. Εδώ όμως, καθώς η πολιτεία μας περιέχει μόνο τη λίστα των todos. Χρειαζόμαστε αυτήν τη λίστα στο στοιχείο ToDo, θα επιστρέψουμε ολόκληρη την κατάσταση ως ιδιοκτησία που ονομάζεται todos.

Όπως μπορείτε να δείτε τώρα, έχουμε πρόσβαση σε ολόκληρη τη λίστα με τα todos στα στηρίγματα μας ως this.props.todos. Με αυτόν τον τρόπο καταφέραμε να αποδώσουμε όλα τα todos μας στο προηγούμενο παράδειγμα χαρτογραφώντας πάνω του.

Τέλος, πρέπει να περάσουμε αυτήν τη λειτουργία στη μέθοδο σύνδεσης για να συνδέσουμε τα πάντα μαζί.

8. Εξαγάγετε τη συνάρτηση σύνδεσης, περνώντας στο mapStateToProps και null ως τα ορίσματα 2 και περνώντας το όνομα του στοιχείου στο δεύτερο ζεύγος αγκυλών

Το Connect είναι μια μέθοδος που συνδέει τις λειτουργίες mapStateToProps και mapDispatchToProps (δείτε παρακάτω) στο στοιχείο σας, έτσι ώστε το κατάστημα να μπορεί να διαβάσει αυτές τις λειτουργίες και να διασφαλίσει ότι αυτό που ορίσατε εκεί μεταφέρεται στο στοιχείο ως στηρίγματα. Αυτή η μέθοδος έχει μια ειδική σύνταξη που μοιάζει με αυτήν:

connect(mapStateToProps, MapDispatchToProps)(YourComponent)

Μεταβιβάζετε τις 2 map...ToPropsλειτουργίες στη σύνδεση και, στη συνέχεια, το όνομα του στοιχείου σας μέσα στο δεύτερο ζεύγος αγκυλών. Ένα τυπικό μοτίβο είναι η εξαγωγή της μεθόδου σύνδεσης αντί του στοιχείου σας όταν εξάγετε το στοιχείο στο τέλος του αρχείου σας. Για παράδειγμα:

export default connect(mapStateToProps, MapDispatchToProps)(YourComponent)

Αυτό στη συνέχεια ενεργεί με τον ίδιο τρόπο όπως η εξαγωγή κανονικά εκτός από το κράτος και οι αποστολές θα μεταφερθούν ως στηρίγματα. mapStateToProps και mapDispatchToProps είναι στην πραγματικότητα προαιρετικές παράμετροι για σύνδεση. Εάν δεν θέλετε να περάσετε ένα ή και τα δύο, τοποθετήστε το μηδέν στη θέση τους.

Ίσως αναρωτιέστε από πού προήλθε αυτή η λειτουργία mapDispatchToProps και γιατί δεν την έχουμε αναφέρει πουθενά εδώ. Λοιπόν, καθώς αυτός ο οδηγός είναι το πιο απλοποιημένο παράδειγμα ενός καταστήματος Redux και του mapDispatchToProps δεν είναι αυστηρά υποχρεωτικό, δεν το έχω συμπεριλάβει στο παράδειγμά μας. Εάν δεν περάσετε το mapDispatchToProps και περάσετε το null αντ 'αυτού, μπορείτε να συνεχίσετε να έχετε πρόσβαση στη λειτουργία αποστολής στο στοιχείο σας όπως έχουμε ήδη νωρίτερα this.props.dispatch.

Επομένως, για να ολοκληρώσουμε το παράδειγμα εφαρμογής μας, το μόνο που πρέπει να κάνουμε είναι να εξάγουμε το στοιχείο μας τυλίγοντας το με τη λειτουργία σύνδεσης και να περάσουμε στο mapStateToProps που μόλις ορίσαμε.

Και αυτό είναι! Αυτή είναι μια ολοκληρωμένη εφαρμογή ενός καταστήματος Redux. Δείτε παρακάτω για το λειτουργικό παράδειγμα αυτού που εφαρμόσαμε.

Παράδειγμα πλήρους σχολιασμένου κώδικα

App.js Todo.js

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