Αν ακόμα δεν ξέρετε τι είναι το Redux, σε αυτό το άρθρο θα εστιάσουμε στο να εξηγήσουμε όλα όσα πρέπει να γνωρίζετε για αυτήν τη βιβλιοθήκη το JavaScript, καθώς και τις χρήσεις του, πώς μπορεί να χρησιμοποιηθεί κ.λπ. Με αυτόν τον τρόπο, θα έχετε όλα τα απαραίτητα εργαλεία για να μπορέσετε να το ενσωματώσετε στα επόμενα έργα JS σας.
Ας δούμε πώς είναι το Redux!
Τι είναι η JavaScript;
JavaScript (JS), είναι μια ερμηνευμένη γλώσσα προγραμματισμού. Θεωρείται διάλεκτος του προτύπου ECMAScript και χαρακτηρίζεται από αντικειμενοστραφή, πρωτότυπο, επιτακτική, αδύναμη πληκτρολόγηση και δυναμική. Παρά το όνομά του, δεν πρέπει να συγχέεται με την Java. Η δημιουργία του βασίζεται σε εμπορικούς λόγους, μετά την εξαγορά της Sun Microsystems (δημιουργός Java) από τον Netscape Navigator (δημιουργός του LiveScript) και την αλλαγή του ονόματος της γλώσσας προγραμματισμού.
Κυρίως χρησιμοποιείται στην πλευρά του πελάτη, που αποτελεί αναπόσπαστο μέρος των προγραμμάτων περιήγησης ιστού. Αυτό σας επιτρέπει να βελτιώσετε τη διεπαφή χρήστη και να δημιουργήσετε δυναμικές ιστοσελίδες. Επιπλέον, η JavaScript μπορεί να χρησιμοποιηθεί από την πλευρά του διακομιστή, γνωστή ως JavaScript από την πλευρά του διακομιστή ή SSJS. Η δυνατότητα εφαρμογής του εκτείνεται πέρα από τον ιστό, βρίσκοντας χρήση σε έγγραφα PDF και εφαρμογές επιτραπέζιου υπολογιστή, κυρίως widget κ.λπ.
La Η σύνταξη JavaScript μοιάζει με αυτή γλωσσών όπως η C++ και η Java, αν και υιοθετεί ονόματα και συμβάσεις από την Java, εξ ου και το όνομά του. Αλλά, όπως ανέφερα προηγουμένως, είναι σημαντικό να σημειωθεί ότι, παρά το παρόμοιο όνομά τους, η Java και η JavaScript έχουν διαφορετική σημασιολογία και σκοπούς.
Από την άλλη πλευρά, πρέπει να θυμόμαστε ότι η JavaScript χρησιμοποιεί μια υλοποίηση του Μοντέλου Αντικειμένου Εγγράφου (DOM) και ότι Η JS είναι η μόνη γλώσσα προγραμματισμού που τα προγράμματα περιήγησης κατανοούν εγγενώς. Αρχικά, χρησιμοποιήθηκε σε ιστοσελίδες HTML για λειτουργίες στον πελάτη χωρίς πρόσβαση στον διακομιστή. Ωστόσο, σήμερα χρησιμοποιείται ευρέως για την αποστολή και λήψη πληροφοριών από τον διακομιστή, συχνά σε συνδυασμό με τεχνολογίες όπως το AJAX. Η JavaScript ερμηνεύεται στον παράγοντα χρήστη ενώ οι δηλώσεις κατεβαίνουν μαζί με τον κώδικα HTML.
Εφαρμογές JS
Η JavaScript είναι μια γλώσσα προγραμματισμού που χρησιμοποιείται ευρέως σε ποικίλες εφαρμογές και περιβάλλοντα, όπως:
- Ανάπτυξη διαδικτύου: Είναι απαραίτητο στην ανάπτυξη Ιστού. Χρησιμοποιείται για τη βελτίωση της αλληλεπίδρασης και της εμπειρίας χρήστη σε ιστότοπους και διαδικτυακές εφαρμογές. Χρησιμοποιείται μεταξύ άλλων στη δημιουργία διαδραστικών μορφών, οπτικών εφέ, επικυρώσεων δεδομένων σε πραγματικό χρόνο και δυναμικής πλοήγησης. Παρόν σε:
- Web front-end: Είναι ο ακρογωνιαίος λίθος της ανάπτυξης front-end. Τα πλαίσια και οι βιβλιοθήκες όπως το React, το Angular και το Vue.js βασίζονται σε JavaScript για τη δημιουργία διαδραστικών και δυναμικών διεπαφών χρήστη σε εφαρμογές web.
- Web backend: Μέσω πλατφορμών όπως το Node.js, η JavaScript χρησιμοποιείται από την πλευρά του διακομιστή για τη δημιουργία ολοκληρωμένων εφαρμογών Ιστού. Αυτό επιτρέπει σε έναν προγραμματιστή να χρησιμοποιεί JavaScript τόσο στο front-end όσο και στο back-end μιας εφαρμογής, καθιστώντας εύκολο τον συγχρονισμό δεδομένων και τη δημιουργία εφαρμογών σε πραγματικό χρόνο.
- Εφαρμογές διακομιστή: Αν και δεν είναι τόσο συνηθισμένο όσο άλλες γλώσσες του διακομιστή, η JavaScript χρησιμοποιείται στην ανάπτυξη εφαρμογών διακομιστή μέσω του Node.js. Αυτό είναι ιδιαίτερα χρήσιμο για εφαρμογές σε πραγματικό χρόνο και εφαρμογές που χειρίζονται μεγάλο αριθμό ταυτόχρονων αιτημάτων.
- Εφαρμογές για κινητά: Χρησιμοποιείται στην ανάπτυξη υβριδικών εφαρμογών για κινητά χρησιμοποιώντας πλαίσια όπως το React Native και το Ionic. Αυτά τα πλαίσια επιτρέπουν στους προγραμματιστές να γράφουν μία φορά και να εκτελούν την εφαρμογή σε πολλές πλατφόρμες, όπως iOS και Android.
- Διαδικτυακά παιχνίδια: Χρησιμοποιείται στην ανάπτυξη διαδικτυακών παιχνιδιών και παιχνιδιών προγράμματος περιήγησης. Βιβλιοθήκες όπως το Phaser και το Three.js διευκολύνουν τη δημιουργία διαδραστικών παιχνιδιών 2D και 3D στο πρόγραμμα περιήγησης.
- Εφαρμογές επιτραπέζιου υπολογιστή: Μέσω εργαλείων όπως το Electron, είναι δυνατή η δημιουργία εφαρμογών επιφάνειας εργασίας πολλαπλών πλατφορμών χρησιμοποιώντας τεχνολογίες Ιστού όπως HTML, CSS και JavaScript.
- Επεκτάσεις προγράμματος περιήγησης: Για να προσθέσετε πρόσθετες λειτουργίες σε προγράμματα περιήγησης ιστού, χρησιμοποιούνται επεκτάσεις. Αυτές οι επεκτάσεις είναι συνήθως γραμμένες σε JavaScript.
- Εφαρμογές Internet of Things (IoT): Χρησιμοποιείται στην ανάπτυξη εφαρμογών και συστημάτων για συσκευές IoT λόγω της ικανότητάς του να επικοινωνεί με υλικό και αισθητήρες μέσω API και εξειδικευμένων βιβλιοθηκών.
Τι είναι το Redux και πώς λειτουργεί;
Το Redux είναι μια βιβλιοθήκη JavaScript ανοιχτού κώδικα που χρησιμοποιείται για τη διαχείριση κατάστασης σε εφαρμογές και επηρεάζεται από τη λειτουργική γλώσσα Elm. Συχνά συνδυάζεται με άλλες βιβλιοθήκες όπως η React ή η Angular για τη δημιουργία διεπαφών χρήστη. Επινοήθηκε από τους Dan Abramov και Andrew Clark, οι οποίοι εμπνεύστηκαν από τη βιβλιοθήκη του Facebook που ονομάζεται Flux.
Σε γενικές γραμμές, το Redux είναι μια μικρή βιβλιοθήκη με α Απλό και περιορισμένο API, σχεδιασμένο να λειτουργεί ως προβλέψιμο δοχείο για την κατάσταση εφαρμογής. Η λειτουργία του είναι παρόμοια με την έννοια του "reduce" στον λειτουργικό προγραμματισμό.
Η ιστορία του Redux χρονολογείται από το Το 2015, όταν ο Dan Abramov άρχισε να αναπτύσσει την πρώτη έκδοση του Redux ενώ προετοιμαζόταν να δώσει μια ομιλία στο συνέδριο React Europe σχετικά με το Hot Reloading. Κατά τη διάρκεια αυτής της διαδικασίας, ο Abramov παρατήρησε την ομοιότητα μεταξύ του μοτίβου Flux και της λειτουργίας μειωτήρα. Αυτή η παρατήρηση τον οδήγησε να αναρωτηθεί εάν ένα κατάστημα Flux θα μπορούσε πράγματι να είναι μια λειτουργία μειωτήρα.
Για να πραγματοποιήσει αυτή την ιδέα, ο Abramov επικοινώνησε με τον Andrew Clark, ο οποίος ήταν ο συγγραφέας της εφαρμογής Flux που ονομάζεται Flummox. Μαζί συνεργάστηκαν για να ζωντανέψουν το Redux και όρισαν ένα συνεκτικό API. Επιπλέον, εφάρμοσαν την ικανότητα να επέκταση χρησιμοποιώντας ενδιάμεσο λογισμικό και ενισχυτές αποθήκευσης, που συνέβαλε σημαντικά στο σημερινό οικοσύστημα Redux, διευρύνοντας περαιτέρω τις δυνατότητές του.
Σχέση Redux και React: τι είναι το React
Το React είναι μια βιβλιοθήκη JavaScript που εστιάζει στη δημιουργία διεπαφών χρήστη, αν και η ευελιξία του υπερβαίνει αυτόν τον ορισμό. Αυτό το εργαλείο, που αναπτύχθηκε αρχικά από το Facebook, είναι ανοιχτού κώδικα και χρησιμοποιείται ευρέως λόγω της ικανότητάς του να δημιουργεί γρήγορα διεπαφές χρήστη σε μια ποικιλία εφαρμογών, συμπεριλαμβανομένων των εφαρμογών ιστού μιας σελίδας (SPA) και εφαρμογών Android. και iOS.
Σε αντίθεση με άλλα πλαίσια, όπως το Angular, που προσφέρουν πιο σύνθετες προσεγγίσεις, το React είναι ξεχωρίζει για την ικανότητά του να δημιουργεί διεπαφές χρήστη αποτελεσματικά. Αυτό επιτυγχάνεται με τη χρήση αρχείων .jsx, τα οποία συνδυάζουν λογική και διεπαφή χρήστη σε ένα μόνο αρχείο και οργανώνονται σε μονάδες που ονομάζονται συστατικά στοιχεία.
Εικονικό DOM: τι είναι;
Όταν εμβαθύνουμε στον κόσμο του ReactJS, πιθανότατα ακούμε συχνά για την έννοια του Εικονικό DOM. Αυτή η ιδέα προέρχεται από μια έξυπνη ιδέα: αντί να ενημερώσουμε ολόκληρο το πραγματικό DOM, τροποποιούμε μόνο το τμήμα που χρειάζεται πραγματικά αλλαγές. Σε παλιές εφαρμογές JavaScript, λαμβάναμε δεδομένα σε μορφή JSON από τον διακομιστή και στη συνέχεια δημιουργούσαμε ένα πλήρες νέο HTML για απόδοση, με αποτέλεσμα την ανανέωση ολόκληρης της σελίδας σε κάθε τροποποίηση.
Πώς να εγκαταστήσετε και να ρυθμίσετε το Redux στο έργο σας
Αν θέλετε να το ξέρετε πώς να εγκαταστήσετε το ReduxΗ αλήθεια είναι ότι δεν είναι καθόλου περίπλοκο. Για να το κάνετε αυτό πρέπει να πάτε στο τερματικό και από εκεί πρέπει να εκτελέσετε την ακόλουθη εντολή:
npm i -S redux
Τώρα έχετε εγκατεστημένη τη σταθερή έκδοση του Redux στο σύστημά σας. Φυσικά, πιθανότατα θα χρειαστεί να επιλύσετε ορισμένες εξαρτήσεις, όπως η εγκατάσταση του npm, του διαχειριστή πακέτων Node.js. Μόλις γίνει αυτό, θα εγκαταστήσουμε τώρα το React, το οποίο θα πρέπει επίσης να εκμεταλλευτείτε το Redux, καθώς και τα εργαλεία ανάπτυξης για να μπορέσετε να ξεκινήσετε τη δημιουργία των έργων σας.
Για να εγκαταστήσετε αυτά τα άλλα πακέτα, οι εντολές που πρέπει να εκτελέσετε είναι:
npm i -S react-redux npm i -D redux-devtools
Τώρα θα τα είχατε όλα έτοιμα για να ξεκινήσετε. Εάν μεταβείτε στον κύριο φάκελο ή κατάλογο όπου έχει εγκατασταθεί το Redux, θα δείτε ότι υπάρχουν αρκετοί υποκατάλογοι ή υποφάκελοι, όπως STORE, REDUCERS, ACTIONS, TYPES. Πρέπει να ξέρετε τι είναι το καθένα:
- ΕΝΕΡΓΕΙΕΣ: Πρόκειται για αντικείμενα που πρέπει να έχουν δύο ιδιότητες, μια που περιγράφει τον τύπο (TYPE) της ενέργειας και μια άλλη που περιγράφει τι πρέπει να αλλάξει στην κατάσταση της εφαρμογής.
- ΜΕΙΩΤΕΣ- Οι μειωτήρες είναι λειτουργίες που υλοποιούν τη συμπεριφορά των ενεργειών. Αλλάζουν την κατάσταση της εφαρμογής, ανάλογα με την περιγραφή της ενέργειας και την περιγραφή της αλλαγής κατάστασης.
- ΦΥΛΑΣΣΕΤΑΙ: είναι το μέρος όπου συναντώνται ενέργειες και μειωτήρες, διατηρώντας και αλλάζοντας την κατάσταση της εφαρμογής. Υπάρχει μόνο ένα.
- ΤΥΠΟΙ: όπως είπα και πριν, είναι το είδος της δράσης.
Πρακτικό παράδειγμα: Δημιουργία εφαρμογής με το Redux
Un παράδειγμα χρησιμοποιώντας Redux Θα μπορούσε να είναι το εξής, όπου γίνεται μια απλή λογιστική εφαρμογή χρησιμοποιώντας Redux. Αλλά για να το κάνετε αυτό, πρέπει πρώτα να ρυθμίσετε το Redux και να ορίσετε τις ενέργειες και τους μειωτήρες σας:
// Εισαγωγή βιβλιοθηκών Redux εισαγωγή { createStore } από το 'redux'; // Ορίστε τις ενέργειες const incrementAction = { type: 'INCREMENT' }; const decrementAction = { type: 'DECREMENT' }; // Ορισμός του μειωτήρα const counterReducer = (state = 0, action) => { switch (action.type) { case 'INCREMENT': return state + 1; περίπτωση 'DECREMENT': κατάσταση επιστροφής - 1; προεπιλογή: κατάσταση επιστροφής; } }; // Δημιουργία του καταστήματος Redux const store = createStore(counterReducer); // Εγγραφή σε αλλαγές στο κατάστημα store.subscribe(() => { console.log('Τρέχουσα κατάσταση μετρητή:', store.getState()); }); // Ενέργειες αποστολής για τροποποίηση κατάστασης store.dispatch(incrementAction); store.dispatch(incrementAction); store.dispatch(decrementAction);
Αυτό είναι ένα πολύ απλό παράδειγμα του τρόπου χρήσης του Redux. Σε μια μεγαλύτερη εφαρμογή, θα ορίζατε πιο σύνθετες ενέργειες και μειωτήρες και θα συνδέατε στοιχεία React για πρόσβαση και ενημέρωση της κατάστασης του καταστήματος. Αλλά τουλάχιστον αυτό σας δίνει μια ιδέα για το πώς λειτουργεί...