Πώς να κατανοήσετε τους μειωτές: Μπορείτε να τους χρησιμοποιήσετε χωρίς Redux

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

; Τι είναι ο μειωτής;

Οι μειωτές είναι λειτουργίες που λαμβάνουν είσοδο και αποφασίζουν τι να το κάνουν σε ένα κεντρικό σημείο. Αυτό είναι. ;

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

Το Redux Reducers ™ ️ είναι μια συγκεκριμένη χρήση μειωτών που ερμηνεύουν συμβάντα στην εφαρμογή σας και πώς αλλάζει η κατάσταση της εφαρμογής.

Εάν δεν είστε εξοικειωμένοι με το Redux, το παραπάνω παράδειγμα συνήθως ξεκινάει καλώντας μια dispatchσυνάρτηση με ένα action(αντικείμενο που περιγράφει ένα συμβάν). ;

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

Η χρήση ενός μειωτήρα σε αυτό το απλό παράδειγμα είναι υπερβολική κατά τη γνώμη μου. Είμαι ευτυχής Αντίδραση πρόκειται να παρέχει τόσο ένα useStateκαι useReducerγάντζο για το λόγο αυτό.

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

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

Η Redux σάς επιτρέπει να κάνετε connectτο παγκόσμιο κατάστημα στο στοιχείο σας. Μπορείτε να μεταφράσετε την κατάσταση σε στηρίγματα. Παρέχουν επίσης μια dispatchλειτουργία που ενεργοποιεί τους μειωτές σας.

Αντί να περάσουμε μια dispatchσυνάρτηση, ας περάσουμε σε μια updateσυνάρτηση που λειτουργεί setState.

; Δημιουργία μιας χειρότερης έκδοσης του Redux

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

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

Ακόμα και χωρίς να αλλάξετε καθόλου redux μπορείτε να μιμηθείτε αυτό το μοτίβο. Οι ενέργειες αποστολής που μοιάζουν με SET_COUNTσυμβουλές που πραγματικά θέλουμε setState. Είναι το εύκολο πράγμα που πρέπει να κάνετε.

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

; Οι μειωτές είναι χρήσιμοι για περισσότερο από το κράτος

Οι μειωτές είναι ένας πολύ καλός τρόπος για να συλλέγουν αποφάσεις. Εάν έχετε δουλέψει με το react-router-4 στο παρελθόν, τότε ο παραπάνω κώδικας θα πρέπει να φαίνεται αρκετά εξοικειωμένος.

Χάρη στο /> component, we can nest these route-view reducers anywhere.

Now if someone has the question “What are all the ways the URL can change what renders”, they have one central place to look.

? Summing It Up

  1. Reducers as a pattern exist outside of Redux and Javascript and are simple to implement. They have one single responsibility of taking input and giving output.
  2. Redux Reducers turn app events into state. You don’t need Redux to do this now, you can do it with local component state.
  3. Reducers make it easy to organize and find different variations of what can happen in the code and are useful as apps grow large.

If you have any questions or are looking for one-on-one React mentorship, feel free to tweet me @yurkaninryan any time!

If you like my writing style, here are some other articles that I’ve done.