React + Redux - Βέλτιστες πρακτικές

Αυτό το άρθρο επικεντρώνεται κυρίως στην εφαρμογή ορισμένων καλών πρακτικών που ακολουθώ κατά την κατασκευή εφαρμογών μεγάλης κλίμακας με το React και το Redux.

Διαφοροποίηση των παρουσιαστικών στοιχείων και των δοχείων.

Όταν σχεδιάζουμε μια εφαρμογή αντίδρασης με redux, θα πρέπει να χωρίσουμε τα συστατικά μας σε παρουσιάσιμα συστατικά στοιχεία και δοχεία.

Τα παρουσιαστικά στοιχεία αποτελούν συστατικά στοιχεία που αποδίδουν HTML. Όλα τα συστατικά παρουσιάσεών μας είναι συστατικά ανυπέρβλητα, επομένως γράφονται ως λειτουργικά συστατικά ανυπαρξία αν δεν χρειάζονται γάντζους πολιτείας και κύκλου ζωής. Τα παρουσιακά στοιχεία δεν αλληλεπιδρούν με το κατάστημα redux για την κατάσταση. Λαμβάνουν δεδομένα μέσω υποδειγμάτων και τα αποδίδουν.

Τα συστατικά του κοντέινερ είναι για τη λήψη δεδομένων από το κατάστημα redux και την παροχή των δεδομένων στα παρουσιακά στοιχεία. Έχουν την τάση να είναι stateful.

Το Presentational Component θα πρέπει να είναι λειτουργικό συστατικό ανιότητας, όπως φαίνεται παρακάτω:

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

Σημεία που πρέπει να σημειωθούν:

  • Μπορούμε να δούμε βελτιωμένη απόδοση όταν χρησιμοποιούμε λειτουργικά εξαρτήματα χωρίς κατάσταση. Αυτά τα στοιχεία αποφεύγουν άσκοπους ελέγχους και κατανομές μνήμης και επομένως είναι πιο αποδοτικοί.
  • Θα είναι εύκολο να δοκιμάσετε ένα στοιχείο, αν γράψετε το στοιχείο όσο το δυνατόν απλούστερα, διαιρώντας τα στοιχεία παρουσίασης και τα συστατικά του δοχείου.
Χρησιμοποιήστε το bindActionCreators για τις ενέργειες αποστολής

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

Αποφύγετε αυτό.

Αποφύγετε αυτό.

Αντ 'αυτού κάνουμε αυτό.

Στο παραπάνω φίλτροTalentPoolDataBySkills στο bindActionCreators είναι διαθέσιμο ως this.props.filterTalentPoolDataBySkills για να αποστείλετε τη δράση σας. Θα διευκολύνει τη διατήρηση του κώδικα για μεγάλο χρονικό διάστημα.

Προσπαθήστε να αποφύγετε τη χρήση του άγκιστρου setState και του κύκλου ζωής του εξαρτήματος όταν χρησιμοποιείτε το Redux:

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

Αποφύγετε να το κάνετε αυτό.

Αντ 'αυτού κάνουμε αυτό.

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

Χρησιμοποιώντας .bind () με τον καλύτερο τρόπο:

Υπάρχουν δύο τρόποι δέσμευσης αυτού του πεδίου εφαρμογής του προσαρμοσμένου στοιχείου.

  1. Συνδέοντας τους στον κατασκευαστή.

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

2. Δέσμευση κατά τη διάρκεια της περάτωσης ως αξία prop.

Η μέθοδος .bind () δημιουργεί μια νέα συνάρτηση κάθε φορά που εκτελείται, αυτή η μέθοδος θα οδηγούσε σε μια νέα συνάρτηση που δημιουργείται κάθε φορά που εκτελείται η λειτουργία rendering. Αυτό έχει κάποιες συνέπειες επίδοσης. Σε μικρές εφαρμογές δεν μπορούμε να τις παρατηρήσουμε, όπου όπως και στις μεγάλες εφαρμογές μπορούμε να τις παρατηρήσουμε. Επομένως, δεν είναι προτιμότερο να δεσμεύει μια συνάρτηση κατά τη στιγμή που περνάει ως τιμή prop.

Λύση:

  1. Είναι καλύτερο να δεσμεύσετε τις προσαρμοσμένες λειτουργίες σας στον κατασκευαστή.
  2. Υπάρχει ένα plugin Babel που ονομάζεται μετατροπή ιδιότητες κλάσης. Μπορείτε να γράψετε τη συνάρτηση αυτόματης σύνδεσης χρησιμοποιώντας τη σύνταξη βέλους του λίπους.

Αν δείτε τον παραπάνω κώδικα δεν υπάρχουν λειτουργίες που να δεσμεύουν.

Χρησιμοποιήστε τις λειτουργίες του Accessor

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

Κάνοντας αυτό θα είναι εύκολο να προσθέσετε τύπους ροής για τις λειτουργίες σας.

Γράψτε τον κώδικα καθαρισμού χρησιμοποιώντας τα χαρακτηριστικά ES6

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

Χρησιμοποιήστε τα χαρακτηριστικά Destructuring & spread:

Αποφύγετε αυτό.

Αντ 'αυτού κάνουμε αυτό.

Χρησιμοποιήστε τις λειτουργίες βέλους:

Αποφύγετε αυτό:

Αντ 'αυτού κάνουμε αυτό.

Χρησιμοποιήστε τους τύπους ροής

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

Το Typescript είναι πιο εξελιγμένο για να ενσωματωθεί στο τρέχον έργο και η ροή είναι εύκολο να εισαχθεί, επιτρέποντας με μια προειδοποίηση ότι μπορεί να ελέγχει λιγότερο από την κωδικοποίηση όπως αναμενόταν.

Καθώς το έργο javascript αυξάνεται χωρίς δακτυλογράφηση, το πιο δύσκολο refactoring θα γίνει. Όσο μεγαλύτερος είναι ο σχεδιασμός τόσο υψηλότερος είναι ο κίνδυνος κατά τον επαναδραστηριοποιητή. Η χρήση του ελέγχου τύπου μπορεί να μην εξαλείψει εντελώς τον κίνδυνο, αλλά θα το μειώσει σημαντικά.

Οφέλη στη χρήση ροής:

  1. Επί τόπου ανίχνευση σφαλμάτων ή σφαλμάτων.
  2. Επικοινωνεί με τον σκοπό της λειτουργίας.
  3. Εξασφαλίζει πολύπλοκο χειρισμό σφαλμάτων.
  4. Διαγράφει σφάλματα τύπου χρόνου εκτέλεσης.
Χρησιμοποιήστε τη βιβλιοθήκη axios για τα αιτήματα HTTP μέσω jQuery ajax:

Το fetch API και axios είναι οι πιο προτιμότεροι τρόποι για να κάνετε τα αιτήματα HTTP. Μεταξύ αυτών των δύο υπάρχουν μερικά πλεονεκτήματα της χρήσης της βιβλιοθήκης axios. Αυτοί είναι

  • Επιτρέπει την εκτέλεση μετασχηματισμών δεδομένων πριν από την υποβολή αιτήματος ή μετά την παραλαβή της απάντησης.
  • Σας επιτρέπει να αλλάξετε ολόκληρο το αίτημα ή την απάντηση (και κεφαλίδες). επίσης, να εκτελέσετε λειτουργίες ασύγχρονου συναγερμού πριν γίνει η αίτηση ή πριν εγκατασταθεί η Promise.
  • Ενσωματωμένη προστασία XSRF.
Χρησιμοποιήστε τα στυλ στοιχεία για να σχεδιάσετε τα στοιχεία σας

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

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

Παράδειγμα:

Δοκιμάστε τα εξαρτήματά σας React

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

Στο στοιχείο React to test χρησιμοποιούμε το Jest και το ένζυμο. Το Jest δημιουργήθηκε από το Facebook και είναι ένα δοκιμαστικό πλαίσιο για τον έλεγχο του κώδικα javascript και React. Μαζί με το Enzyme της Airbnb, το οποίο είναι ένα βοηθητικό πρόγραμμα δοκιμών, το κάνει ιδανικό για να δοκιμάσετε εύκολα την εφαρμογή React.

Χρησιμοποιήστε ES Lint για καλύτερες συμβάσεις κωδικοποίησης.

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

Για να αντιδράτε με συγκεκριμένους κανόνες χνούδι, πηγαίνετε με το eslint-plugin-react.

Για τους κανόνες τύπων λινών ακολουθήστε τα eslint-plugin-flowtype και eslint-plugin-flowtype-errors.