Εισαγωγή στο αρχιτεκτονικό σχέδιο Flux

Το Discover Functional JavaScript ονομάστηκε ένα από τα καλύτερα νέα βιβλία λειτουργικού προγραμματισμού από το BookAuthority !

Το Flux είναι ένα αρχιτεκτονικό σχέδιο που προτείνεται από το Facebook για την κατασκευή SPA. Προτείνει να χωριστεί η εφαρμογή στα ακόλουθα μέρη:

  • Προμήθεια
  • Αποστολέας
  • Προβολές
  • Δημιουργοί δράσης / δράσης

Κατάστημα

Το Store διαχειρίζεται την πολιτεία. Μπορεί να αποθηκεύσει τόσο την κατάσταση του τομέα όσο και την κατάσταση της διεπαφής χρήστη.

Το κατάστημα και η πολιτεία είναι διαφορετικές έννοιες. Η κατάσταση είναι η τιμή δεδομένων. Το Store είναι ένα αντικείμενο συμπεριφοράς που διαχειρίζεται την κατάσταση μέσω μεθόδων. Στην περίπτωση διαχείρισης βιβλίων: η λίστα βιβλίων είναι η κατάσταση και το BookStore διαχειρίζεται αυτήν τη λίστα.

Ένα κατάστημα διαχειρίζεται πολλά αντικείμενα. Είναι η μοναδική πηγή αλήθειας σε σχέση με αυτά τα συγκεκριμένα αντικείμενα. Σε μια εφαρμογή μπορεί να υπάρχουν πολλά καταστήματα. Για παράδειγμα: BookStore, AuthorStore, UserStore.

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

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

Τα καταστήματα δεν θεωρούν άλλα καταστήματα ως εξαρτήματα.

Αποστολέας

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

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

Θέα

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

Οι προβολές ακούνε για αλλαγές στο κατάστημα και εκ νέου απόδοση.

Οι προβολές μπορούν να χωριστούν περαιτέρω στις Προβολές παρουσίασης και κοντέινερ.

Οι προβολές παρουσίασης δεν συνδέονται με αποστολέα ή καταστήματα. Επικοινωνούν μόνο μέσω των ιδιοτήτων τους.

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

Το κοντέινερ προβάλλει ενέργειες αποστολής ως απάντηση στην επανάληψη του χρήστη.

Ενέργειες

Μια ενέργεια είναι ένα απλό αντικείμενο που περιέχει όλες τις απαραίτητες πληροφορίες για να γίνει αυτή η ενέργεια.

Οι ενέργειες έχουν μια typeιδιότητα που προσδιορίζει τον τύπο ενέργειας.

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

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

Δημιουργοί δράσης

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

Κλήσεις API Ιστού

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

Οι κλήσεις API Ιστού πραγματοποιούνται σε δημιουργούς δράσης. Μπορούμε να εξαγάγουμε τον κώδικα που κάνει την κλήση API στις λειτουργίες Web API Utils.

Μονοκατευθυντική ροή δεδομένων

Ενημέρωση ροής προβολών σε μία κατεύθυνση:

Οι προβολές δεν τροποποιούν τα δεδομένα που έλαβαν. Ακούνε αλλαγές αυτών των δεδομένων, δημιουργούν ενέργειες με νέες τιμές, αλλά δεν ενημερώνουν τα δεδομένα.

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

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

Αποθηκεύστε τις ενδείξεις

Αποθήκευση εγγράφων σε σύγχρονες ενέργειες

Αποθήκευση εγγράφων σε ασύγχρονες ενέργειες

Πλεονεκτήματα

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

Οι ενέργειες μπορούν να συνεχιστούν και στη συνέχεια να αναπαραχθούν.

Μειονεκτήματα

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

Ρίξτε μια ματιά για παράδειγμα στο Πώς να δημιουργήσετε μια εφαρμογή τριών επιπέδων με το React.

συμπέρασμα

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

Οι προβολές καθιστούν το περιβάλλον εργασίας χρήστη και χειρίζονται την αλληλεπίδραση χρήστη. Οι προβολές κοντέινερ ακούνε τις αλλαγές στο κατάστημα.

Ο αποστολέας μεταδίδει ενέργειες σε όλα τα καταχωρισμένα καταστήματα.

Οι ενέργειες είναι απλά αντικείμενα.

Το Discover Functional JavaScript ονομάστηκε ένα από τακαλύτερα νέα βιβλία λειτουργικού προγραμματισμού από το BookAuthority !

Για περισσότερα σχετικά με την εφαρμογή τεχνικών λειτουργικού προγραμματισμού στο React ρίξτε μια ματιά στο Functional React .

Μάθετε λειτουργικό React , με βάση ένα έργο, με τη λειτουργική αρχιτεκτονική με το React και το Redux .

Ακολουθήστε στο Twitter