Apollo vs Redux - απόδοση με δεδομένα

Το Apollo και το Redux είναι 2 δημοφιλείς βιβλιοθήκες που χρησιμοποιούνται με το React. Περιλαμβάνονται για διάφορους λόγους, αλλά κυρίως για:
1. Διαχείριση ενός καταστήματος
2. Υποστήριξη επεξεργασίας δεδομένων
3. Εκκίνηση οποιασδήποτε επανεγγραφής με ενημερωμένα στηρίγματα

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

Αποφάσισα να ερευνήσω και κάτω από αυτό είναι το προϊόν αυτού.

TLDR.

Ο Apollo χρησιμοποιεί ένα παρατηρήσιμο και χειρονακτικώς υποχρεώνει μια επανάδοση, διαβάζοντας την τρέχουσα Obsible για δεδομένα στο σημείο απόδοσης.

Το Redux χρησιμοποιεί επίσης ένα παρατηρήσιμο, αλλά ενημερώνει την τοπική κατάσταση για τους συνδρομητές του χρησιμοποιώντας ειδοποιήσεις παρατηρητή.

Παρατηρητές

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

  1. Δημιουργήστε τη λειτουργία Obspectable από μια συνδρομή
const συνδρομήFunction = (παρατηρητής) => {
   // κάνει κάποια πράγματα, θα μπορούσε να είναι async.
   observer.next ("Καλέστε με μερικά δεδομένα");
   observer.complete ();
   επιστροφή () => console.log ("Κατάργηση εγγραφής")
}}
const ourObservable = new Obsible (συνδρομήFunction);

2. Εγγραφείτε στο παρατηρητή σας. Αυτό θα ενεργοποιήσει τη λειτουργία συνδρομής.

const συνδρομητής = ourObservable.subscribe ({
   επόμενο (x) {console.log (x)}, // "Κλήση με μερικά δεδομένα"
   σφάλμα (err) {console.log ("Λήψη τερματισμού σφάλματος του
   αλληλουχία.") },
   ολοκληρώστε () {console.log ("Το ρεύμα ολοκληρώθηκε με επιτυχία.")}
})?
subscriber.unsubscribe (); // "Κατάργηση εγγραφής"

Βασικά μπορούμε να ορίσουμε μια σχέση 1 προς πολλά μεταξύ αντικειμένων. Όταν αλλάζει η κατάσταση για το μητρικό παρατηρητή, τα εξαρτώμενα από αυτόν πρόσωπα (οι παρατηρητές) ενημερώνονται και ενημερώνονται.

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

Ανατρέξτε στο zen-observable για να τις χρησιμοποιήσετε με τρόπο συμβατό με τις προδιαγραφές σήμερα.

Ας ξεκινήσουμε με τον Απόλλωνα

Ο Apollo χρησιμοποιεί το fetch μέσα σε μια λειτουργία συνδρομής Observables (ανακαλύψτε όλες τις λεπτομέρειες για τα εσωτερικά του Apollo σε μια πρόσφατη συζήτηση που έκανα εδώ). Το Observable επίσης χρησιμεύει ως Κατάστημα για κανονικοποιημένα δεδομένα.

Κατά την παραλαβή της απάντησης από αίτημα HTTP, το Store ενημερώνεται και στη συνέχεια ενεργοποιείται ένα "forceRender ()" (μέθοδος Reacts για χειροκίνητη ενεργοποίηση μιας επανάχρησης μέσα σε ένα δεδομένο στοιχείο).

Τέλος, χρησιμοποιώντας το "πρότυπο πρόωσης", τα παιδιά αποδίδονται με δεδομένα εκτός του τρέχοντος Obsble. Αξίζει να σημειωθεί ότι η κατάσταση React δεν έχει χρησιμοποιηθεί καθόλου εδώ.

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

Πλήρης ανατομία φόρτωσης σελίδας με τον Apollo

Τώρα στο Redux

Με το Redux θα αγνοήσουμε τον πραγματικό μηχανισμό HTTP fetching (υποθέτοντας ότι θα χρησιμοποιηθούν είτε thunks ή sagas) και θα επικεντρωθεί στις ενημερώσεις του καταστήματος και στις αναδημιουργίες στοιχείων.

Όταν ένα στοιχείο "συνδέει ()" προστίθεται στη λίστα των συνδρομητών για το Store Obsable (περισσότερα στο Redux Store Obsible εδώ).
Όταν ένας μειωτής αλλάζει κατάσταση στο Store, ειδοποιούνται όλοι οι συνδρομητές και τρέχουν ένα "setState ()".

Το αποτέλεσμα είναι το συνδεδεμένο στοιχείο και τα παιδιά του αναπαράγονται με ενημερωμένες στηρίξεις.

Μια απλοποιημένη έκδοση της σύνδεσης Redux είναι κάτω από:

class Connect επεκτείνει το στοιχείο {
     trySubscribe () {
        this.unsubscribe =
          this.store.subscribe (this.handleChange.bind (αυτό))
        this.handleChange ()
     }}
     componentDidMount () {
       this.trySubscribe ()
     }}
     handleChange () {
       const storeState = this.store.getState ()
       const prevStoreState = this.state.storeState
       // λογική χρησιμοποιώντας κατάσταση αποθήκευσης και αντίδρασης
       // αν η κατάσταση Store έχει αλλάξει, ενημερώστε την κατάσταση Reacts
       this.setState ({storeState})
     }}
}}

Περίληψη

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

Νομίζω ότι αν τίποτα άλλο δεν δείχνει το είδος του ρόλου που θα έχουν οι Observables στο μέλλον του Javascript. Βρίσκονται στο στάδιο 1 της επίσημης πρότασης (πλήρεις λεπτομέρειες εδώ στο tc39 εδώ), οπότε ελπίζουμε ότι θα προσγειωθεί σύντομα. Λαμβάνοντας υπόψη το είδος της εξουσίας που φέρνουν στο τραπέζι (η επίλυση των προβλημάτων που οι υποσχέσεις είναι Streams μερικές φορές δεν μπορεί) φαίνεται ότι υπάρχει ένας σωστός αριθμός σεναρίων που θα τους ταιριάζει.

Η ανάγνωση λειτουργικών παραδειγμάτων αυτών σε άγρια ​​κατάσταση, όπως και στο Redux και στον Απόλλωνα, είναι ένας πολύ καλός τρόπος για να μάθετε περισσότερα γι 'αυτά.

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

Αν σας άρεσε αυτό, παρακαλούμε να χτυπήσετε ένα χτύπημα. Εναλλακτικά, ενημερώστε με αν έχετε οποιεσδήποτε σκέψεις ή σχόλια. Ευχαριστώ :)