Mobx React - Βέλτιστες πρακτικές

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

Αυτό το άρθρο απαιτεί να έχετε μια βασική κατανόηση των καταστημάτων στο mobx. Αν όχι, διαβάστε πρώτα αυτό.

Χρειάζεστε μια γρήγορη εκκίνηση; Δημιούργησα ένα πρόγραμμα εκκίνησης, το οποίο υλοποιεί τις συνιστώμενες πρακτικές. https://github.com/danielbischoff/react-mobx-starter

Τα καταστήματα αντιπροσωπεύουν την κατάσταση ui

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

Διαχωρίστε τις υπόλοιπες κλήσεις σας από τα καταστήματα

Μην καλείτε τη διασύνδεση ανάπαυσης από τα καταστήματά σας. Αυτό τους καθιστά δύσκολο να δοκιμαστούν. Αντ 'αυτού, τοποθετήστε αυτές τις κλήσεις ανάπαυσης σε επιπλέον τάξεις και περάστε αυτές τις παρουσίες σε κάθε κατάστημα χρησιμοποιώντας τον κατασκευαστή του καταστήματος. Όταν γράφετε δοκιμή, μπορείτε εύκολα να ψεύσετε αυτές τις κλήσεις api και να περάσετε την ψεύτικη παρουσία σας api σε κάθε κατάστημα.

Διατηρήστε την επιχειρηματική σας λογική στα καταστήματα

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

Μην δημιουργείτε εμφανίσεις παγκόσμιων καταστημάτων

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

Μόνο το κατάστημα μπορεί να αλλάξει τις ιδιότητές του

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

Πάντα να σχολιάζετε κάθε στοιχείο με @ παρατηρητή

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

Χρησιμοποιήστε @ υπολογισμένο

Ας υποθέσουμε ότι θέλετε το κουμπί σας να είναι απενεργοποιημένο όταν ο χρήστης δεν έχει το ρόλο διαχειριστή και η εφαρμογή δεν βρίσκεται σε "κατάσταση διαχειριστή". Μια ενιαία ιδιότητα όπως το isAdmin σε ένα κατάστημα δεν αρκεί για αυτό. Θα χρειαστείτε μια υπολογισμένη ιδιοκτησία στο κατάστημά σας.

Ίσως δεν χρειάζεστε αντιδραστήρα δρομολογητή

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

Προσπαθήστε να προτιμάτε τα ελεγχόμενα εξαρτήματα από τα μη ελεγχόμενα εξαρτήματα

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

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