Advanced ReactJS: Βέλτιστες πρακτικές για το React + Redux + Sagas

καφέ για σκέψη

Πρώτα πράγματα πρώτα, μια γρήγορη εισαγωγή για το τι είναι το React. Είναι μια βιβλιοθήκη JavaScript που χρησιμοποιείται για τη δημιουργία διεπαφών χρήστη. Έχει αλλάξει το τοπίο ανάπτυξης από τη στιγμή που βγήκε. Έτσι, αν είστε φιλοδοξεί να είναι μια front-end web developer μάθησης βιβλιοθήκες όπως React ή Vue.js είναι σχεδόν απαραίτητη στη σημερινή βιομηχανία. Εδώ είναι ένα σπουδαίο φροντιστήριο αν μόλις αρχίσετε να μαθαίνετε React. https://reactjs.org/tutorial/tutorial.html.

Θυμάμαι όταν άρχισα να μαθαίνω το React. Πάντα έχω την αγωνία ότι δεν θα μπορούσα ποτέ να μάθω όλα όσα χρειάζομαι, τη συνεχώς μεταβαλλόμενη γλώσσα JavaScript που επικρατούσε πάνω από το κεφάλι μου και αν έκανα κάτι σωστό πάντα θα έφευγα να αναρωτιέμαι αν ήταν ο καλύτερος τρόπος να το κάνω? Μετά από κυριολεκτικά εκατοντάδες online σεμινάρια, αναζητήσεις στο Youtube και ατελείωτες (και κατά πάσα πιθανότητα μη ξαναγεμισμένες) φλιτζάνια καφέ, τελικά είχα μια σταθερή αντίληψη για το τι προσπαθεί να φέρει ο React στον πίνακα JavaScript.

Ωστόσο, αγωνιζόμουν πάντα να βρω ένα σεμινάριο που να συνδυάζει όλες τις προηγμένες έννοιες του React σε ένα συμπαγές φροντιστήριο.

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

Αρκετά με το chat chit. Ας μιλήσουμε κώδικα. Κατεβάστε τον τελικό κώδικα από αυτό το repo και ακολουθήστε το README ώστε να μπορείτε να δείτε και να αισθανθείτε τι πρόκειται να χτίσει εδώ. https://github.com/jelorivera08/react-starter-pack.

Σελίδα προορισμού της εφαρμογής

Πάνω, μπορείτε να δείτε την κατάσταση μέτρησης που εμφανίζεται και τέσσερα κουμπιά που ενεργοποιούν τις αντίστοιχες ενέργειες τους. Οι ενέργειές τους είναι αυτονόητες.

επιλογείς

Προχωρήστε στο αρχείο selectors.js μέσα στο κοντέινερ Counter, το πρώτο προηγμένο concept που αντιμετωπίζουμε εδώ είναι το createSelector. Αναζητώντας τον κώδικα, πρώτα, η μεταβλητή count count συγκεντρώνει την κατάσταση μέτρησης μέσα στο δέντρο state redux χρησιμοποιώντας το state.get ('count').

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

Στη συνέχεια, η προκύπτουσα λειτουργία θα χρησιμοποιηθεί μέσα στο mapStateToProps, και με το mapStateToProps, φυσικά, το επόμενο πράγμα που πρέπει να ρυθμίσετε είναι το mapDispatchToProps.

δημιουργήστε ενέργειες

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

περιστέλλων

Πάνω από τον μειωτή της εφαρμογής μας. Η αρχική κατάσταση περικλείεται από το API fromJS από αμετάβλητη και καθώς το όνομα της συσκευασίας εφαρμόζεται, προστατεύει την αρχική κατάσταση από τη μετάλλαξη. Η αντίδραση είναι πολύ αυστηρή με αυτή την έννοια, έτσι ώστε πάντα να το έχετε κατά νου. το createReducer API από το reduxsauce έχει δύο επιχειρήματα.

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

redie saga

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

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

κωδικοποίηση κώδικα

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

Συμπερασματικά,

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

Το Learning React απαιτεί από εσάς να μετατοπίσετε το πρότυπο κωδικοποίησης σε ένα πολύ πιο διαφορετικό σε σύγκριση με το προηγούμενο σύνολο συναισθημάτων κωδικοποίησης στο front-end. Τα εργαλεία και τα πακέτα που έχω συζητήσει σε αυτό το άρθρο ενσωματώνουν τις αρχές που απαιτούνται για να κωδικοποιήσει όμορφα και αποτελεσματικά στο React και αυτό είναι που κάνει έναν εξαιρετικό προγραμματιστή.

Είναι πάντα τα μικρά πράγματα.

Με αυτό, ελπίζω να σας βοηθήσω να κατανοήσετε καλύτερα το React με αυτό το μικρό άρθρο. Στην υγειά σας!