⚡ Πώς να μην επαναλάβετε ξανά τα ίδια λάθη RxJss

Θυμηθείτε: .pipe () δεν είναι .subscribe ()!

Αυτό το άρθρο απευθύνεται στους αρχάριους που προσπαθούν να αυξήσουν τις γνώσεις τους στο RxJs, αλλά μπορεί επίσης να είναι μια γρήγορη ανανέωση ή μια αναφορά για εμφάνιση σε αρχάριους για πιο έμπειρους προγραμματιστές!

Σήμερα θα το κρατήσουμε σύντομο και κατ 'ευθείαν στο σημείο!

Αυτήν τη στιγμή εργάζομαι σε έναν αρκετά μεγάλο οργανισμό, αρκετές ομάδες και έργα (περισσότερα από 40 ΖΕΠ) που βρίσκονται στη διαδικασία μετάβασης στο Angular και επομένως και σε RxJs.

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

Η συνάρτηση ".subscribe ()"

Τα παρατηρούμενα RxJs αντιπροσωπεύουν μια «συνταγή» αυτού που θέλουμε να συμβεί. Είναι δηλωτικό που σημαίνει ότι όλες οι λειτουργίες και οι μετασχηματισμοί καθορίζονται στο σύνολό τους από την αρχή.

Ένα παράδειγμα μιας παρατηρήσιμης ροής θα μπορούσε να μοιάζει με αυτό…

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

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

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

Εξετάστε το ακόλουθο παράδειγμα…

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

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

Όπως μπορούμε να δούμε, το ενσωματωμένο στυλ ορίσματος εφαρμογής μιας .subscribe()κλήσης συνάρτησης είναι θέση.

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

Δυστυχώς, πολλές φορές ενδέχεται να συναντήσουμε εφαρμογή όπως τα ακόλουθα…

Το παραπάνω παράδειγμα περιέχει περιττούς χειριστές και για τους δύο nextκαι τους errorχειριστές που δεν κάνουν τίποτα και θα μπορούσαν να έχουν αντικατασταθεί από null.

Ακόμα καλύτερα θα ήταν να περάσει το αντικείμενο του παρατηρητή με την completeεφαρμογή χειριστή, παραλείποντας εντελώς άλλους χειριστές!

Το ".pipe ()" και οι τελεστές

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

Οι χειριστές RxJs, οι οποίοι συχνά συγχέονται με τους .subscribe()χειριστές, είναι catchErrorκαι finalize. Και οι δύο εξυπηρετούν παρόμοιο σκοπό - η μόνη διαφορά είναι ότι χρησιμοποιούνται στο πλαίσιο του σωλήνα αντί της συνδρομής.

Σε περίπτωση που θέλουμε να αντιδράσουμε στο πλήρες συμβάν κάθε συνδρομής της ροής παρατηρήσιμων RxJs, θα μπορούσαμε να εφαρμόσουμε τον finalizeτελεστή ως μέρος της ίδιας της παρατηρήσιμης ροής.

Με αυτόν τον τρόπο δεν χρειάζεται να εξαρτηθούμε από τους προγραμματιστές για να εφαρμόσουμε ολοκληρωμένους χειριστές σε κάθε κλήση .subscribe (). Θυμηθείτε, η παρατηρούμενη ροή μπορεί να εγγραφεί σε περισσότερες από μία φορές!

Αυτό μας φέρνει στο τελικό και αναμφισβήτητα πιο προβληματικό μοτίβο που ενδέχεται να συναντήσουμε κατά την εξερεύνηση διαφόρων βάσεων κώδικα: προστέθηκαν περιττοί τελεστές όταν προσπαθούν να ακολουθήσουν το μοτίβο .subscribe () στο πλαίσιο .pipe ().

Επίσης, μπορεί να συναντήσουμε τον ακόμη πιο ρητό ξάδελφό του…

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

Τα πράγματα μπορεί να γίνουν ακόμη πιο περίπλοκα όταν συνδυάζονται με πιο πολύπλοκους γενικούς τύπους Typescript, οι οποίοι μπορούν να κάνουν ολόκληρο το μπλοκ κώδικα ακόμη πιο μυστηριώδες (και ως εκ τούτου σπαταλά περισσότερο από τον χρόνο μας).

Ανακεφαλαίωση

  1. Η .subscribe()μέθοδος δέχεται τόσο το αντικείμενο του παρατηρητή όσο και τους ενσωματωμένους χειριστές.
  2. Το αντικείμενο παρατηρητή αντιπροσωπεύει τον πιο ευέλικτο και περιεκτικό τρόπο εγγραφής σε μια παρατηρήσιμη ροή.
  3. Σε περίπτωση που θέλετε να πάτε με τα επιχειρήματα inline εγγραφείτε ( next, error, complete) μπορούμε να προσφέρουμε nullστη θέση του χειριστή δεν χρειαζόμαστε.
  4. Πρέπει να βεβαιωθούμε ότι δεν προσπαθούμε να επαναλάβουμε το .subscribe()μοτίβο κατά την αντιμετώπιση .pipe()και τους χειριστές.
  5. Προσπαθήστε πάντα να διατηρήσετε τον κώδικα όσο το δυνατόν πιο απλό και να αφαιρέσετε περιττές απολύσεις!

Αυτό είναι! ✨

Ελπίζω να σας άρεσε αυτό το άρθρο και τώρα θα έχετε καλύτερη κατανόηση για το πώς να εγγραφείτε σε παρατηρητές RxJs με καθαρή και περιεκτική εφαρμογή!

Υποστηρίξτε αυτόν τον οδηγό με το ??? χρησιμοποιώντας το κουμπί χειροκρότημα και να το βοηθήσετε να εξαπλωθεί σε ένα ευρύτερο κοινό; Επίσης, μην διστάσετε να με ping αν έχετε απορίες σχετικά με τις απαντήσεις του άρθρου ή τα DM Twitter @tomastrajan.

Και μην ξεχνάτε ποτέ, το μέλλον είναι λαμπρό Ξεκινώντας ένα έργο Γωνιακό; Ρίξτε μια ματιά στο γωνιακό υλικό εκκίνησης NgRx!

Εάν το έχετε φτάσει μέχρι τώρα, μη διστάσετε να δείτε μερικά από τα άλλα άρθρα μου σχετικά με την ανάπτυξη λογισμικού Angular και frontend γενικά…

? ‍? ️ Οι 7 επαγγελματικές συμβουλές για να γίνετε παραγωγικοί με το γωνιακό CLI & Schematics;

Μια g ular Σχηματικά είναι ένα εργαλείο ροής εργασιών για τον σύγχρονο ιστό - την επίσημη εισαγωγή articlehac kernoon.com   ο καλύτερος τρόπος να Κατάργηση RxJS παρατηρήσιμα στην γωνιακή εφαρμογές!

Υπάρχουν πολλοί διαφορετικοί τρόποι για να χειριστείτε τις συνδρομές RxJS σε εφαρμογές Angular και θα εξερευνήσουμε… blog.angularindepth.com Συνολικός οδηγός για γωνιακή ένεση εξάρτησης 6+ - παρέχεται σε έναντι παρόχων: []?

L et μάθουμε πότε και πώς να χρησιμοποιούν τις νέες καλύτερη γωνιακή 6+ μηχανισμό ψεκασμού εξάρτηση με νέα σύνταξη providedIn να κάνει ... μ edium.com Ο τελευταίος απάντηση στο Πολύ συχνές γωνιακή Ερώτηση: εγγραφείτε () vs | async Pipe

Οι περισσότερες από τις δημοφιλείς βιβλιοθήκες διαχείρισης της γωνιακής κατάστασης όπως το NgRx εκθέτουν την κατάσταση της εφαρμογής σε μορφή ροής… blog.angularindepth.com