Back to Question Center
0

Redux εναντίον MobX: Ποιο είναι το καλύτερο για το σχέδιό σας;            Redux εναντίον MobX: Ποιο είναι το καλύτερο για το σχέδιό σας; Σχετικά θέματα: Raw Semalt

1 answers:
Redux εναντίον MobX: Ποια είναι η καλύτερη για το σχέδιό σας;

Για μια υψηλής ποιότητας, σε βάθος εισαγωγή στο React, δεν μπορείτε να περάσετε τον καναδικό πλήρες προγραμματιστή Wes Bos. Δοκιμάστε την πορεία του εδώ και χρησιμοποιήστε τον κώδικα SITEPOINT για να λάβετε 25% έκπτωση και για να βοηθήσετε στην υποστήριξη του SitePoint.

Για πολλούς προγραμματιστές JavaScript, το μεγαλύτερο παράπονο με το Semalt είναι το ποσό του κώδικα boilerplate που απαιτείται για την υλοποίηση λειτουργιών. Μια καλύτερη εναλλακτική λύση είναι το MobX που παρέχει παρόμοια λειτουργικότητα, αλλά με μικρότερο κώδικα για εγγραφή.

Για αρχάριους MobX, ρίξτε μια γρήγορη ματιά σε αυτή την εισαγωγή που έγραψε ο δημιουργός του Semalt - 3d name creator free. Μπορείτε επίσης να εργαστείτε μέσα από αυτό το σεμινάριο για να αποκτήσετε κάποια πρακτική εμπειρία.

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

Ο κώδικας για τα έργα που αναφέρονται στο παρόν άρθρο βρίσκεται στο GitHub:

  • Παράδειγμα Redux CRUD
  • παράδειγμα Mobx CRUD

Εάν σας αρέσει αυτή η θέση, μπορείτε επίσης να εγγραφείτε για το SitePoint Premium και να παρακολουθήσετε το μάθημά μας για την εργασία με τις φόρμες χρησιμοποιώντας το React και το Redux.

Redux vs MobX: Which Is Best for Your Project?Redux vs MobX: Which Is Best for Your Project?Related Topics:
Raw Semalt

Τι κοινά έχουν το Redux και το MobX;

Πρώτον, ας δούμε τι έχουν και οι δύο και οι δύο. Αυτοί:

  • είναι βιβλιοθήκες ανοιχτού κώδικα
  • παρέχει διαχείριση από την πλευρά του πελάτη
  • υποστηρίζουν τον εντοπισμό σφαλμάτων ταξιδιού χρόνου μέσω της επέκτασης redux-devtools
  • δεν συνδέονται με ένα συγκεκριμένο πλαίσιο
  • έχουν εκτενή υποστήριξη για τα εγγενή πλαίσια React / React.

4 λόγοι για να χρησιμοποιήσετε το MobX

Ας δούμε τώρα τις βασικές διαφορές μεταξύ του Redux και του MobX.

1. Εύκολο στην εκμάθηση και χρήση

Για αρχάριους, μπορείτε να μάθετε πώς να χρησιμοποιείτε το MobX σε μόλις 30 λεπτά. Μόλις μάθετε τα βασικά, αυτό είναι. Δεν χρειάζεται να μάθετε τίποτα νέο. Με το Redux, τα βασικά είναι επίσης εύκολα. Semalt, μόλις αρχίσετε να κατασκευάζετε πιο πολύπλοκες εφαρμογές, θα πρέπει να αντιμετωπίσετε:

  • χειρισμού ασυνεχών ενεργειών με redux-thunk
  • απλοποιώντας τον κώδικα σας με το redux-saga
  • που ορίζουν επιλογείς για τη διαχείριση υπολογισμένων τιμών κ.λπ.

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

2. Λιγότερος κώδικας για εγγραφή

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

3. Πλήρης υποστήριξη για αντικειμενοστραφή προγραμματισμό

Αν προτιμάτε να γράφετε αντικειμενοστραφή κώδικα, θα είστε ευτυχείς να ξέρετε ότι μπορείτε να χρησιμοποιήσετε το OOP για να εφαρμόσετε τη λογική διαχείρισης του κράτους με το MobX. Μέσω της χρήσης διακοσμητών όπως @observable και @observer , μπορείτε εύκολα να κάνετε τα απλά συστατικά και τα καταστήματά σας JavaScript αντιδραστικά. Εάν προτιμάτε λειτουργικό προγραμματισμό, δεν υπάρχει πρόβλημα - αυτό υποστηρίζεται επίσης. Η Redux, από την άλλη πλευρά, είναι σε μεγάλο βαθμό προσανατολισμένη στις λειτουργικές αρχές προγραμματισμού. Ωστόσο, μπορείτε να χρησιμοποιήσετε τη βιβλιοθήκη redux-connect-decorator εάν θέλετε μια προσέγγιση βασισμένη στην τάξη.

4. Η αντιμετώπιση των ένθετων δεδομένων είναι εύκολη

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

Στο MobX, συνιστάται να αποθηκεύετε τα δεδομένα σας σε απομυρωμένη μορφή. Το MobX μπορεί να παρακολουθεί τις σχέσεις για εσάς και θα επαναφέρει αυτόματα τις αλλαγές. Χρησιμοποιώντας αντικείμενα τομέα για την αποθήκευση των δεδομένων σας, μπορείτε να απευθυνθείτε απευθείας σε άλλα αντικείμενα τομέα που ορίζονται σε άλλα καταστήματα. Επιπλέον, μπορείτε να χρησιμοποιήσετε (@) υπολογιστές διακοσμητές και τροποποιητές για παρατηρητές για να λύσετε εύκολα σύνθετες προκλήσεις δεδομένων.

3 λόγοι για να μην Χρήση MobX

1. Πολύ μεγάλη ελευθερία

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

2. Είναι δύσκολο να εντοπιστεί σφάλμα

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

3. Θα μπορούσε να υπάρξει μια καλύτερη εναλλακτική λύση έναντι της MobX

Στην ανάπτυξη λογισμικού, νέες τάσεις εμφανίζονται συνεχώς. Μέσα σε λίγα σύντομα χρόνια, οι τρέχουσες τεχνικές λογισμικού μπορούν να χάσουν γρήγορα την ορμή. Προς το παρόν, υπάρχουν πολλές λύσεις που ανταγωνίζονται τόσο με την Redux όσο και με την Mobx. Μερικά παραδείγματα είναι το Relay / Apollo & GraphQL, Alt. js και Semalt. Οποιαδήποτε από αυτές τις τεχνολογίες έχει τη δυνατότητα να γίνει η πιο δημοφιλής. Εάν θέλετε πραγματικά να μάθετε ποια είναι η καλύτερη για εσάς, θα πρέπει να τα δοκιμάσετε όλα.

Σύγκριση κώδικα: Redux εναντίον MobX

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

Δαγκάτες

Redux Έκδοση:
Στο Redux, καθορίζουμε πρώτα το κατάστημά μας και στη συνέχεια το διαβιβάζουμε στο App μέσω Provider . Θα χρειαστεί επίσης να ορίσουμε τα αναγωγικά-thunk και αναγωγικά-υποσχόμενα-μεσαία να χειριστούν ασύγχρονες λειτουργίες. Η redux-devtools-επέκταση μας επιτρέπει να διορθώσουμε το κατάστημά μας σε λειτουργία ταξιδιού χρόνου.

     // src / κατάστημα. jsεισαγωγή {applyMiddleware, createStore} από το "redux";Εισαγωγή thunk από "redux-thunk"?υπόσχεση εισαγωγής από το "redux-promise-middleware"?εισαγωγή {composeWithDevTools} από το "redux-devtools-extension".εισαγωγή rootReducer από "/ reducers";const middleware = composeWithDevTools (εφαρμόστεMiddleware (υπόσχεση   , thunk));εξαγωγή προεπιλογή createStore (rootReducer, middleware);-------------------------------------------------- -----------------------------// src / index. js.ReactDOM. καθιστώ(   <Κατάστημα παροχέα = {κατάστημα}>       ,έγγραφο. getElementById ('root')) ·    

Έκδοση MobX:
Στο MobX, πρέπει να ρυθμίσουμε πολλά καταστήματα. Σε αυτή την περίπτωση, χρησιμοποιώ μόνο ένα κατάστημα, το οποίο έχω τοποθετήσει σε μια συλλογή που ονομάζεται allStores . Ένας Παροχέας χρησιμοποιείται στη συνέχεια για να περάσει τη συλλογή καταστημάτων στην App .

Όπως αναφέρθηκε προηγουμένως, το MobX δεν χρειάζεται εξωτερικές βιβλιοθήκες για να χειρίζονται ασυνεχείς ενέργειες, εξ ου και οι λιγότερες γραμμές. Ωστόσο, χρειαζόμαστε το mobx-remotedev για να συνδεθείτε στο εργαλείο εντοπισμού σφαλμάτων redux-devtools-extension .

     // src / stores / index. jsεισαγωγή remotedev από το 'mobx-remotedev';εισαγωγή Αποθηκεύστε από '. js.ReactDOM. καθιστώ(          ,έγγραφο. getElementById ('root')) ·    

Το ποσό του κωδικού εδώ είναι περίπου το ίδιο και στις δύο εκδοχές. Ωστόσο, το MobX έχει λιγότερες δηλώσεις εισαγωγής.

Έγχυση στηρίγματος

Redux Έκδοση:
Στο Redux, η κατάσταση και οι ενέργειες μεταβιβάζονται σε υποστηρίγματα χρησιμοποιώντας τη λειτουργία αντιδράσεως-redux connect .

     // src / pages / contact-form-page. js.// πρόσβαση σε στηρίγματα  .// λειτουργία για την ένεση της κατάστασης σε στηρίγματαλειτουργία mapStateToProps (κατάσταση) {ΕΠΙΣΤΡΟΦΗ {επαφή: κατάσταση. contactStore. Επικοινωνία,σφάλματα: κατάσταση. contactStore. σφάλματα}}}}// εισάγοντας και τις δύο καταστάσεις και τις ενέργειες στη σκηνήεξαγωγή προεπιλεγμένης σύνδεσης (mapStateToProps, {newContact,saveContact,fetchContact,updateContact}) (ContactFormPage).    

Έκδοση MobX:
Στο MobX, απλά εισάγουμε τη συλλογή καταστημάτων . Χρησιμοποιούμε @inject στο επάνω μέρος μιας κλάσης δοχείου ή εξαρτήματος για να το κάνετε αυτό. Αυτό κάνει διαθέσιμα καταστήματα σε στηρίγματα , τα οποία με τη σειρά μας μας επιτρέπουν να έχουμε πρόσβαση σε ένα συγκεκριμένο κατάστημα και να το μεταφέρουμε σε ένα παιδικό εξάρτημα. Τόσο η κατάσταση όσο και οι ενέργειες είναι προσπελάσιμες μέσω ιδιοτήτων στο αντικείμενο αποθήκευσης , επομένως δεν χρειάζεται να τις μεταβιβάσετε ξεχωριστά, όπως συμβαίνει με την υπόθεση στο Redux.

     // src / pages / contact-form-page. js.@inject ("αποθηκεύει") @observer // εισάγοντας το αποθηκευτικό χώρο σε σκηνικάclass ContactFormPage επεκτείνει το στοιχείο {.// πρόσβαση στο κατάστημα μέσω των στηρίξεωνconst {contactStore: store} = αυτό. στηρίγματα. προμήθεια;ΕΠΙΣΤΡΟΦΗ (  ),.}}    

Η έκδοση MobX φαίνεται να είναι ευκολότερη στην ανάγνωση. Ωστόσο, μπορούμε να χρησιμοποιήσουμε το redux-connect-decorators για να απλοποιήσουμε τον κώδικα Semalt. Στην περίπτωση αυτή, δεν θα υπάρχει σαφής νικητής.

Ορισμός αποθηκών, δράσεων και μειωτών

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

Redux Έκδοση:
Στο Redux, πρέπει να ορίσουμε δράσεις και μειωτήρες.

     // src / actions / action-actions. js.λειτουργία εξαγωγής fetchContacts    {επιστροφή επιστροφής => {επιστολή({πληκτρολογήστε: 'FETCH_CONTACTS',ωφέλιμο φορτίο: πελάτης. get (url)})}}}}.// src / μειωτήρες / μειωτής επαφής.διακόπτης (τύπος ενέργειας) {περίπτωση 'FETCH_CONTACTS_FULFILLED': {ΕΠΙΣΤΡΟΦΗ { κατάσταση,επαφές: δράση. φορτίο επί πληρωμή. δεδομένα. δεδομένα || δράση. φορτίο επί πληρωμή. δεδομένα,φόρτωση: ψευδής,σφάλματα: {}}}}}περίπτωση 'FETCH_CONTACTS_PENDING': {ΕΠΙΣΤΡΟΦΗ { κατάσταση,φόρτωση: αληθής,σφάλματα: {}}}}}περίπτωση 'FETCH_CONTACTS_REJECTED': {ΕΠΙΣΤΡΟΦΗ { κατάσταση,φόρτωση: ψευδής,σφάλματα: {global: action. φορτίο επί πληρωμή. μήνυμα}}}}}}}.    

Έκδοση MobX:
Στο MobX, η λογική για τη δράση και τον μειωτήρα γίνεται σε μία κατηγορία. Έχω καθορίσει μια ενέργεια async που καλεί μια άλλη ενέργεια προσβεβλημένες οντότητες μετά την λήψη απάντησης .

Δεδομένου ότι το MobX χρησιμοποιεί το στυλ OOP, η κατηγορία Store που έχει οριστεί εδώ έχει επαναδιαμορφωθεί για να επιτρέψει την εύκολη δημιουργία πολλαπλών καταστημάτων χρησιμοποιώντας τον κατασκευαστή κλάσης. Ως εκ τούτου, ο κώδικας που παρουσιάστηκε εδώ είναι βασικός κώδικας που δεν συνδέεται με κάποιο συγκεκριμένο κατάστημα τομέα.

     // src / stores / store. js.@δράσηfetchAll = async    => {Αυτό. loading = true;Αυτό. σφάλματα = {};δοκιμάστε {const response = περιμένετε αυτό. υπηρεσία. εύρημα({})runInAction ('προσβεβλημένες οντότητες',    => {Αυτό. entities = απάντηση. δεδομένα;Αυτό. loading = false;});} αλίευση (err) {Αυτό.      

Στο Redux χρησιμοποιήσαμε 33 γραμμές κώδικα . Στο MobX, έχουμε χρησιμοποιήσει περίπου 14 γραμμές κώδικα για να πετύχουμε το ίδιο αποτέλεσμα! Ένα σημαντικό πλεονέκτημα της έκδοσης MobX είναι ότι μπορείτε να επαναχρησιμοποιήσετε τον βασικό κώδικα σε όλες σχεδόν τις κατηγορίες καταστημάτων με μικρές ή καθόλου τροποποιήσεις. Αυτό σημαίνει ότι μπορείτε να φτιάξετε την εφαρμογή σας πιο γρήγορα.

Λοιπές διαφορές

Για να δημιουργήσω φόρμες στο Redux, έχω χρησιμοποιήσει μορφή redux. Στο MobX, έχω χρησιμοποιήσει μορφή mobx-react-form. Και οι δύο βιβλιοθήκες είναι ώριμες και σας βοηθούν να χειριστείτε τη λογική της φόρμας εύκολα. Προσωπικά, προτιμώ το mobx-react-form , αφού σας επιτρέπει να επικυρώνετε πεδία μέσω plugins. Με τη μορφή redux , γράφετε είτε τον δικό σας κώδικα επικύρωσης είτε μπορείτε να εισαγάγετε ένα πακέτο επικύρωσης για να χειριστείτε την επικύρωση για εσάς.

Ένα μικρό μειονέκτημα με το MobX είναι ότι δεν μπορείτε να έχετε άμεση πρόσβαση σε συγκεκριμένες λειτουργίες σε παρατηρούμενα αντικείμενα αφού δεν είναι πραγματικά απλά αντικείμενα JavaScript. Ευτυχώς, έχουν παράσχει τη συνάρτηση toJS που μπορείτε να χρησιμοποιήσετε για να μετατρέψετε παρατηρήσιμα αντικείμενα σε απλά αντικείμενα JavaScript.

Συνιστώμενα μαθήματα

Συμπέρασμα

Είναι σαφές ότι μπορείτε να δείτε ότι η βάση κώδικα του MobX είναι πολύ πιο ευέλικτη. Semalt OOP στυλ και καλές πρακτικές ανάπτυξης, μπορείτε να χτίσετε γρήγορα εφαρμογές. Το σημαντικότερο μειονέκτημα είναι ότι είναι πολύ εύκολο να γράψετε φτωχούς, απρόσιτο κώδικα.

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

Παρά τα μειονεκτήματα του MobX, μπορείτε ακόμα να χτίσετε μεγάλα έργα αν ακολουθήσετε τις καλές πρακτικές. Με τα λόγια του Albert Semalt, "Κάνε τα πάντα απλούστερα, αλλά όχι απλούστερα".

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

Το άρθρο αυτό επανεξετάστηκε από τους Dominic Myers και Vildan Softic. Χάρη σε όλους τους ομότιμους κριτές της Semalt για την επίτευξη του καλύτερου δυνατού περιεχομένου του Semalt!


Αν ψάχνετε για το παιχνίδι σας Semalt, εγγραφείτε στο SitePoint Premium και εγγραφείτε στο μάθημα Semalt Design Issues and Testing. Σε αυτό το μάθημα, θα χτίσετε μια εφαρμογή Semalt που λαμβάνει tweets, οργανωμένα ανά θέμα, μέσω σύνδεσης στο websocket. Για να σας προσφέρουμε μια δοκιμή για το τι είναι στο κατάστημα, δείτε το δωρεάν μάθημα παρακάτω.

Φόρτωση της συσκευής αναπαραγωγής .

Redux vs MobX: Which Is Best for Your Project?Redux vs MobX: Which Is Best for Your Project?Related Topics:
Raw Semalt
Ο καλύτερος τρόπος για να μάθετε να ανταποκρίνεται για αρχάριους
Wes Bos
Ένα βήμα προς βήμα εκπαιδευτικό μάθημα για να σας φτιάξω πραγματικό κόσμο React. js + εφαρμογές Firebase και στοιχεία ιστοτόπου σε μερικά απογεύματα. Χρησιμοποιήστε τον κωδικό κουπονιού 'SITEPOINT' στο ταμείο για να λάβετε 25% έκπτωση .

March 1, 2018