Πώς να ενσωματώσετε το Redux στην εφαρμογή σας με το React Native και το Expo

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

Ανάγκη για Redux

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

Το State and Props είναι οι μόνοι δύο τρόποι ελέγχου δεδομένων σε ένα στοιχείο. Το Props είναι σύντομο για ιδιότητες. Είναι ένας απλός κανόνας που πρέπει να ακολουθήσουμε στον κόσμο του React ότι δεν πρέπει να μεταλλάξουμε ή να αλλάξουμε την αξία των στηριγμάτων. Στο React, η ροή δεδομένων είναι μονόδρομη ή μονόδρομη. Δηλαδή, τα δεδομένα μπορούν πάντα να διαβιβάζονται από έναν γονέα σε ένα θυγατρικό στοιχείο. Ρίξτε μια ματιά παρακάτω σε αυτό το απλό παράδειγμα:

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

Με αυτόν τον τρόπο, το θυγατρικό στοιχείο μπορεί να επαναχρησιμοποιηθεί με άλλα γονικά στοιχεία έτσι ώστε κάθε γονικό στοιχείο να μπορεί να έχει τα δικά του δεδομένα για απόδοση. Λάβετε υπόψη ότι δεν τροποποιούμε την τιμή this.propsσε κανένα σημείο.

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

Δεδομένου ότι μπορούμε να διαχειριστούμε την κατάσταση και τα στηρίγματα τόσο αποτελεσματικά σε μια εφαρμογή React Native, γιατί είναι απαραίτητο το Redux; Λοιπόν, το παραπάνω παράδειγμα αντιπροσωπεύει το γυμνό ελάχιστο και όχι σενάριο σε πραγματικό χρόνο. Φανταστείτε μια εφαρμογή όπως το Instagram ή το Twitter. Έχετε διαφορετικές οθόνες και κάθε οθόνη μπορεί να εξαρτάται από ένα ή δύο στοιχεία, όπως τα στοιχεία του γονέα και των επαναχρησιμοποιήσιμων παιδιών από το παράδειγμά μας. Θα ήταν δύσκολο να παρακολουθείτε την κατάσταση κάθε στοιχείου.

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

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

Απλώς θυμηθείτε τους ακόλουθους όρους, καθώς θα τους δούμε σε δράση στον παρακάτω οδηγό:

  • Ενέργειες
  • Μειωτές
  • Κατάστημα

Το κλειδί για την εκμάθηση του Redux είναι η πρακτική. Δεν θέλω να μοιραστώ πάρα πολλές πληροφορίες και να κατακλύσω πράγματα τώρα. Ας ξεκινήσουμε, λοιπόν, δημιουργώντας μια εφαρμογή επίδειξης για να μάθουμε το Redux.

Δημιουργία εφαρμογής Pomodoro

Ξεκινώντας με το Expo-CLI;

Για να δημιουργήσω αυτήν την εφαρμογή, θα χρησιμοποιήσω το πιο πρόσφατο εργαλείο που εισήγαγε η ομάδα Expo που ονομάζεται expo-cli. Εγκαταστήστε το ως παγκόσμια εξάρτηση και, στη συνέχεια, ξεκινήστε ένα νέο έργο React Native χρησιμοποιώντας το.

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

Θα σας ζητηθεί η ακόλουθη διεπαφή. Αφιερώστε λίγο χρόνο για να το περάσετε. Εάν έχετε δημιουργήσει εφαρμογές χρησιμοποιώντας το Expo XDE ή το Create-React-Native-App στο παρελθόν, θα δείτε ότι δεν έχουν αλλάξει πολλά, εκτός από το ότι τώρα το Expo-CLI χρησιμοποιεί το πρόγραμμα περιήγησης Chrome.

Επιλέξτε έναν προσομοιωτή ή συσκευή που μπορεί να εκτελέσει το Expo Client όπως επισημαίνεται στην παραπάνω εικόνα. Εάν εμφανιστεί η παρακάτω οθόνη, αυτό σημαίνει ότι το έργο React Native έχει ξεκινήσει χωρίς δυσκολίες.

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

Εξαρτήματα χρονοδιακόπτη ⏱

Κατ 'αρχάς, θα δημιουργήσουμε ένα dumb Timer στοιχείο και θα το συνδέσουμε App.js. Προσθέστε τον ακόλουθο κωδικό στο Timer/index.js:

Στη συνέχεια, τροποποιήστε το App.jsαρχείο:

Τώρα θα φτιάξουμε ένα στατικό στοιχείο χρονοδιακόπτη για να δούμε πώς ταιριάζουν τα πράγματα. Θα ξεκινήσουμε τροποποιώντας το StatusBar. Στη συνέχεια, ορίζουμε δύο Textστοιχεία από τη react-nativeβιβλιοθήκη για να καθορίσουμε πού θα εμφανιστεί ο πραγματικός χρονοδιακόπτης και πού θα εμφανιστούν τα κουμπιά έναρξης και διακοπής του χρονοδιακόπτη. Προς το παρόν, και τα δύο είναι πεδία κειμένου.

Προσθήκη κουμπιών;

Σε αυτήν την ενότητα, θα αντικαταστήσουμε την ενότητα που εμφανίζεται Start and Stop Buttons!με τα πραγματικά κουμπιά. Θα το χρησιμοποιήσουμε TouchableOpactiyγια να το κάνουμε αυτό. Ένα TouchableOpacityστοιχείο λειτουργεί ως περιτύλιγμα για να κάνει τις προβολές να ανταποκρίνονται σωστά στις πινελιές. Η αδιαφάνεια της τυλιγμένης προβολής (ή του κουμπιού στην περίπτωσή μας) μειώνεται κάθε φορά που ο χρήστης την αγγίζει.

Δημιουργούμε ένα επαναχρησιμοποιήσιμο στοιχείο αφού χρειαζόμαστε δύο κουμπιά: Έναρξη και Διακοπή.

Αυτό είναι ένα στοιχείο χωρίς κατάσταση, οπότε δεν έχει τάξη - το χρειαζόμαστε μόνο για να αντιπροσωπεύσουμε το κουμπί στο περιβάλλον χρήστη της εφαρμογής μας. Εισάγουμε επίσης εικονίδια FontAwesome @expo/vector-icons, το οποίο είναι ένα πιρούνι από αντιδράσεις-εικονίδια-διανυσματικά-εικονίδια και έρχεται απευθείας με το expo SDK. Δεν χρειάζεται να το εγκαταστήσετε ως ξεχωριστή εξάρτηση. Για να εμφανιστεί ένα εικονίδιο, πρέπει να το ορίσουμε size.

Τέλος, στο παραπάνω στοιχείο ανιθαγενών, ορίζουμε propTypes. Θα συζητήσω πώς και γιατί πρέπει να χρησιμοποιήσουμε τους PropTypes σε μια εφαρμογή React Native σε άλλο άρθρο.

Σε μια εφαρμογή για κινητά, τα συμβάντα ενεργοποιούνται με άγγιγμα. Για να χειριστούμε αυτά τα γεγονότα, θα χρησιμοποιήσουμε onPress. Θα έχουμε μόνο δύο εκδηλώσεις εδώ, Έναρξη και Διακοπή. Και τα δύο κουμπιά στην εφαρμογή μας θα χρησιμοποιηθούν από τα onPressOutοποία διαφέρει onPress. Το onPressOutκαλείται κάθε φορά που αφήνεται η αφή από τον χρήστη (όταν ο χρήστης σταματά να πατάει το κουμπί). Ονομάζεται πριν onPressκαι είναι πιο ακριβής σε μια κατάσταση όπως η δική μας, όπου πρέπει να ξεκινήσουμε ή να σταματήσουμε το χρονόμετρο πατώντας το κουμπί μόλις τελειώσει ο χρήστης.

Θα απαιτήσουμε τώρα αυτό το Buttonστοιχείο στο στοιχείο Χρονοδιακόπτη.

Ενσωμάτωση του Redux;

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

Τώρα, ας αρχίσουμε να ενσωματώνουμε το Redux στην εφαρμογή μας.

Ενέργειες ?

Στο Redux, η κατάσταση ολόκληρης της εφαρμογής αντιπροσωπεύεται από ένα αντικείμενο JavaScript. Σκεφτείτε αυτό το αντικείμενο ως μόνο για ανάγνωση, καθώς δεν μπορούμε να κάνουμε αλλαγές σε αυτήν την κατάσταση (η οποία αντιπροσωπεύεται με τη μορφή δέντρου) άμεσα. Πρέπει actionsνα το κάνουμε.

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

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

Στο αρχείο actions.js, θα απαιτήσουμε αυτούς τους τύπους για να καθορίσουμε τους δημιουργούς ενεργειών. Action Creators είναι συναρτήσεις που δημιουργούν ενέργειες.

Μειωτές;

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

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

Στην αρχική μας κατάσταση, ορίζουμε τρία χαρακτηριστικά: isPlaying, elapsedTimeκαι timerDuration. Ο χρονοδιακόπτης έχει επί του παρόντος μια προεπιλεγμένη τιμή 6 (δευτερόλεπτα) για σκοπούς δοκιμής, αλλά η πραγματική τιμή που πρόκειται να αλλάξουμε αργότερα είναι 25(ή 1500 δευτερόλεπτα).

Στη συνέχεια, υπάρχουν τρεις λειτουργίες βοηθού:

  • applyStartTimer θα ξεκινήσει το χρονόμετρο
  • applyRestartTimer θα σταματήσει τη λειτουργία χρονοδιακόπτη και θα ορίσει τα πάντα ως προεπιλογή
  • και τέλος, applyAddSecondθα ελέγξει εάν ο χρόνος που πέρασε είναι μικρότερος από τη συνολική διάρκεια του χρονοδιακόπτη. Εάν ναι, θα προσθέσει ένα ακόμη δευτερόλεπτο για να αυξήσει την αξία του. Εάν όχι, θα επιστρέψει την προεπιλεγμένη κατάσταση και θα σταματήσει η λειτουργία του χρονοδιακόπτη.

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

Αυτός είναι ένας καλός πόρος για να ξεκινήσετε με το Redux γενικά από τον Dan Abramov και είναι ΔΩΡΕΑΝ!

Δημιουργία Redux Store;

Με τη βοήθεια του μειωτήρα και της αρχικής κατάστασης, μπορούμε να δημιουργήσουμε το αντικείμενο αποθήκευσης.

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

Για να συνδέσετε μια εφαρμογή React ή React Native με το Redux, το κάνετε με το react-reduxmodule. Αυτό γίνεται χρησιμοποιώντας το συστατικό με υψηλή τάξη Provider. Περνά ουσιαστικά το κατάστημα μέχρι την υπόλοιπη εφαρμογή.

Πρέπει να συνδέσουμε τους δημιουργούς δράσης με τη λειτουργία Χρονοδιακόπτη για να την κάνουμε πλήρως λειτουργική (έτσι ώστε να ανταποκρίνεται στα συμβάντα με δυνατότητα αφής ή στην έναρξη ή την επανεκκίνηση του χρονοδιακόπτη). Θα το κάνουμε αυτό στη Timer/index.jsλειτουργία.

Αρχικά, εισάγουμε τις απαιτούμενες εξαρτήσεις για να δεσμεύσουμε τους δημιουργούς ενεργειών.

bindActionCreatorsχαρτογραφεί τις λειτουργίες δράσης σε ένα αντικείμενο χρησιμοποιώντας τα ονόματα των συναρτήσεων δράσης. Αυτές οι λειτουργίες αποστέλλουν αυτόματα την ενέργεια στο κατάστημα όταν καλείται η συνάρτηση. Για να αλλάξουμε τα δεδομένα, πρέπει να στείλουμε μια ενέργεια. Για να το ενεργοποιήσουμε, χρειαζόμαστε δύο πράγματα: mapStateToPropsκαι mapDispatchToProps, και πρέπει να συνδέσουμε και τα δύο με το στοιχείο μας. Αυτός είναι ο κωδικός boilerplate που θα ξαναγράψετε.

Ορίζουμε αυτές τις δύο λειτουργίες και τροποποιούμε τη export defaultδήλωσή μας αφού ορίσουμε τα στυλ για τις προβολές React Native.

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

Ολοκλήρωση της εφαρμογής ⚛️ +;

Έχω δημιουργήσει μια προσαρμοσμένη συνάρτηση που καλείται formatTimeγια να εμφανίσει τον χρόνο στη σωστή μορφή, αλλά μπορείτε να χρησιμοποιήσετε οποιαδήποτε βιβλιοθήκη χρονομέτρων. Στη συνέχεια, για να αυξήσω την αξία του χρόνου, χρησιμοποιώ τη μέθοδο κύκλου ζωής του React componentWillReceiveProps. Ξέρω ότι πρόκειται να καταργηθεί σύντομα, αλλά προς το παρόν λειτουργεί. Δείτε τη μίνι εφαρμογή μας σε δράση παρακάτω:

Για λόγους συντομίας και αυτής της επίδειξης, χρησιμοποιώ μόνο δευτερόλεπτα για να εμφανίσω το χρονόμετρο. Μπορείτε να αυξήσετε την τιμή του χρονοδιακόπτη με την επεξεργασία της τιμής της σταθεράς TIMER_DURATIONστο reducers.js.

Φτάσαμε στο τέλος του άρθρου. Ας ελπίσουμε ότι διασκεδάσατε τόσο πολύ όσο το έγραψα. Μπορείτε να βρείτε τον πλήρη κώδικα για αυτό το άρθρο σε αυτό το repo Github:

amandeepmittal / rn-pomodoro-παράδειγμα

rn-pomodoro-example - React Native + Redux ολοκλήρωση github.com

Θυμάσαι να σου λέω για μια συγκεκριμένη δομή αρχείων που ακολούθησα στην εφαρμογή της αρχιτεκτονικής Redux; Λοιπόν ονομάζεται μοτίβο re-ducks και μπορείτε να βρείτε περισσότερες λεπτομέρειες σε αυτό το ενημερωτικό άρθρο του Alex Moldovan:

Κλιμάκωση της εφαρμογής Redux με πάπιες

Πώς κλιμακώνεται η εφαρμογή διεπαφής; Πώς βεβαιώνεστε ότι ο κώδικας που γράφετε είναι διατηρήσιμος 6 μήνες… medium.freecodecamp.org

; Για περισσότερες ερωτήσεις, επικοινωνήστε μαζί μου στο Twitter ή διαβάστε περισσότερα για εμένα στον ιστότοπό μου.

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