Εισαγωγή στη Redux-Logic

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

Αυτό το άρθρο προϋποθέτει ότι έχετε καλή κατανόηση των React και Redux.

Μια γρήγορη ανανέωση στο Redux

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

Στο Redux, τα στοιχεία καλούν δημιουργούς ενεργειών που αποστέλλουν ενέργειες . Οι ενέργειες είναι (συνήθως!) Μικρά απλά αντικείμενα που εκφράζουν μια πρόθεση ή μια οδηγία. Οι ενέργειες μπορούν επίσης να περιέχουν «ωφέλιμα φορτία» (δηλαδή δεδομένα).

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

Γιατί η ανάγκη για Redux Logic;

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

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

Αφού εξερεύνησα τις διάφορες επιλογές, έχω χρησιμοποιήσει το Redux-Logic σε διάφορα έργα εδώ και αρκετό καιρό και το βρήκα εξαιρετικό!

Κύκλος ζωής Redux-Logic

Το Redux-Logic παρέχει μεσαίο λογισμικό που εκτελεί κάποια επεξεργασία μεταξύ του όταν μια ενέργεια αποστέλλεται από ένα στοιχείο και όταν η ενέργεια φτάσει σε μειωτή.

Χρησιμοποιούμε τη βιβλιοθήκη redux-logic για να δημιουργήσουμε το "Logic". Αυτές είναι ουσιαστικά συναρτήσεις που παρακολουθούν συγκεκριμένες ενέργειες απλού αντικειμένου , εκτελούν ασύγχρονη επεξεργασία και, στη συνέχεια, αποστέλλουν μια άλλη απλή ενέργεια. Οι λειτουργικές λογικές είναι πραγματικά δηλωτικές και ευέλικτες, όπως θα δούμε!

Ένα σημαντικό πράγμα που πρέπει να καταργήσετε εδώ είναι ότι όλες οι ενέργειες με τις οποίες λειτουργεί το Redux-Logic είναι απλά αντικείμενα . Η ενέργεια που αποστέλλεται από το στοιχείο διεπαφής χρήστη και η ενέργεια που στη συνέχεια αποστέλλεται από τη λογική θα είναι πάντα ένα απλό αντικείμενο (σε αντίθεση με, για παράδειγμα, μια συνάρτηση). Θα το επανεξετάσουμε παρακάτω όταν συγκρίνουμε διαφορετικές επιλογές μεσαίου λογισμικού.

Κάτω από την κουκούλα, η Redux-Logic χρησιμοποιεί «παρατηρήσιμα» και αντιδραστικό προγραμματισμό. Διαβάστε περισσότερα για αυτό εδώ.

Ροή δεδομένων

Παρακάτω, για σύγκριση, είναι ένα διάγραμμα που δημιούργησα και δείχνει τα σημαντικά σημεία στον κύκλο ζωής μιας σύγχρονης διαδικασίας redux. Δεν περιλαμβάνεται μεσαίο λογισμικό (επειδή δεν απαιτείται κανένα!).

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

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

Κύριες διαφορές από άλλες λύσεις

Το Redux-Thunk είναι μια δημοφιλής επιλογή για το μεσαίο λογισμικό Redux που σας επιτρέπει επίσης να υποστηρίζετε ασύγχρονη συμπεριφορά. Για να χειριστείτε την ασύγχρονη συμπεριφορά χρησιμοποιώντας το Redux-Thunk οι ενέργειές σας πρέπει να επιστρέφουν λειτουργίες σε αντίθεση με την επιστροφή απλών αντικειμένων με το Redux-Logic. Πιστεύω ότι η αποστολή απλών αντικειμένων με το Redux-Logic κάνει τον κώδικά σας πολύ πιο εύκολο να γραφτεί και πολύ πιο εύκολο να γίνει κατανοητό.

Επιπλέον, πιστεύω ότι η προσέγγιση «απλού αντικειμένου» για τον χειρισμό ασύγχρονης συμπεριφοράς ταιριάζει πιο φυσικά μαζί με την υπόλοιπη (σύγχρονη) αρχιτεκτονική Redux, η οποία κάνει αυτό το μεσαίο λογισμικό να ταιριάζει πιο οργανικά με το Redux.

Ένα άλλο δημοφιλές μεσαίο λογισμικό Redux είναι το Redux-Saga . Βρήκα την καμπύλη εκμάθησης να κάνω το κεφάλι μου γύρω από τα σάγκα (ένα σχετικά νέο χαρακτηριστικό ES6) αρκετά απότομο όταν κοίταξα αυτήν την επιλογή. Αυτό θα επιδεινωθεί εάν θέλετε να εισαγάγετε αυτήν τη βιβλιοθήκη σε μια εφαρμογή που διαχειρίζεται μια ομάδα με πολλά άτομα. Επιπλέον, πιστεύω ότι εάν δεν διαχειρίζονται σωστά, τότε τα sagas μπορούν να δημιουργήσουν έναν περίπλοκο κώδικα σε σύγκριση με τη Λογική που δημιουργείτε με τη redux-logic. Αυτό μπορεί να επηρεάσει την ταχύτητα ανάπτυξης και τη συντήρηση κώδικα.

Επισκόπηση του παραδείγματος

Ακολουθούν απλά αποσπάσματα από μια απλή εφαρμογή React που μπορούν να ανακτήσουν τις τρέχουσες καιρικές συνθήκες σε μια πόλη και να την παρουσιάσουν στον χρήστη. Το παράδειγμα χρησιμοποιεί το Redux-Logic για την υποστήριξη ασύγχρονης συμπεριφοράς για τη λήψη δεδομένων χρησιμοποιώντας ένα δωρεάν OpenWeatherMap API.

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

Εδώ είναι ο πηγαίος κώδικας.

Δημιουργία περιβάλλοντος ανάπτυξης

Αυτές είναι οι εντολές που έτρεξα για να αρχίσω να δημιουργώ την εφαρμογή μου:

npx create-react-app appnpm install --save reduxnpm install --save react-reduxnpm install --save redux-logicnpm install --save axios

Και για να δείτε την εφαρμογή:

npm start

Χαίρομαι που μπορούσα να δω την προεπιλεγμένη αρχική σελίδα Δημιουργία αντιδράσεων στο localhost: 3000 , τότε άρχισα να γράφω κώδικα!

Ακολουθούν αποσπάσματα κώδικα που δείχνουν τα σημαντικά σημεία για την ενσωμάτωση του Redux-Logic στο έργο.

Προσθήκη μέσου λογισμικού στο κατάστημά μας Redux

Στο appStore.js , εάν δεν χρησιμοποιούσαμε μεσαίο λογισμικό, κανονικά θα παρέχουμε μόνο τον μειωτή ρίζας μας στη μέθοδο createStore. Εδώ συνδέουμε το μεσαίο λογισμικό Redux-Logic με την υπόλοιπη εφαρμογή μας.

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

Στη συνέχεια, χρησιμοποιούμε μια μέθοδο από το redux-logic για να δημιουργήσουμε το μεσαίο λογισμικό μας και τέλος το προσθέτουμε ως παράμετρο στη μέθοδο createStore. Αυτό σημαίνει ότι ο κωδικός Redux θα μπορεί να έχει πρόσβαση στο μεσαίο λογισμικό μας. Μεγάλος!

Αποστολή ασύγχρονων ενεργειών

Με το Redux-Logic, οι ενέργειες που προκαλούν ασύγχρονη συμπεριφορά αποστέλλονται με τον ίδιο τρόπο όπως οι ενέργειες που ενεργοποιούν σύγχρονες ενημερώσεις κατάστασης. Δεν υπάρχει τίποτα διαφορετικό!

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

Παρεμπόδιση ασύγχρονων ενεργειών

Εδώ βλέπουμε για πρώτη φορά την εμφάνιση του redux-logic middleware να παίζει. Χρησιμοποιούμε τη βιβλιοθήκη redux-logic για να δημιουργήσουμε κάποια «Λογική» που θα παρακολουθεί συγκεκριμένες ενέργειες.

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

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

Εναλλακτικά, εάν η υπόσχεση που επιστράφηκε απορρίφθηκε τότε αποστέλλουμε το GET_WEATHER_FOR_CITY_FAILURE .

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

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

Επεξεργασία ασύγχρονων ενεργειών

Μπορείτε να δείτε από τον μειωτή του WeatherDataHandling.js ότι οι ενέργειες που αποστέλλονται από τη Λογική μας αντιμετωπίζονται στη συνέχεια ως ενέργειες απλού αντικειμένου. Οι μειωτές μεταλλάσσουν την κατάσταση με τον ίδιο τρόπο όπως και με τις σύγχρονες ενέργειες . Έτσι, το παρακάτω στιγμιότυπο οθόνης είναι αυτό που θα περίμενε κανείς από τη συνεργασία με τη Redux στο παρελθόν. Σούπερ!

Περίληψη

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

Το Redux-Logic παρέχει ένα καθαρό και ισχυρό ενδιάμεσο λογισμικό που σας επιτρέπει να χρησιμοποιείτε ασύγχρονες ενέργειες στην εφαρμογή Redux. Προσθέτετε το μεσαίο λογισμικό σας στο Redux Store για να επιτρέψετε στην εφαρμογή σας να χρησιμοποιεί το Redux-Logic. Χρησιμοποιείτε τη βιβλιοθήκη redux-logic για να δημιουργήσετε Λογική που παρακολουθεί συγκεκριμένες ενέργειες και αποστέλλει περαιτέρω ενέργειες αφού ολοκληρωθεί κάποια ασύγχρονη επεξεργασία (όπως ανάκτηση δεδομένων από ένα API).

Όλες οι ενέργειες που εμπλέκονται είναι ενέργειες απλού αντικειμένου . Πιστεύω ότι αυτό καθιστά ευκολότερο το γράψιμο και την ευκολότερη κατανόηση σε σύγκριση με άλλες λύσεις. Επιπλέον, η redux-logic μοιάζει πιο οργανική με τα άλλα μέρη της αρχιτεκτονικής Redux.

Ευχαριστώ που διαβάσατε, χαιρετίζω τυχόν σχόλια ή ερωτήσεις παρακάτω!