Το useReducer Hook είναι μια από τις καλύτερες επιλογές για διαχείριση κατάστασης στο React. Ξεκινήστε το ταξίδι σας με το useReducer Hook χρησιμοποιώντας αυτόν τον οδηγό.

Η διαχείριση κατάστασης είναι ζωτικής σημασίας για την ανάπτυξη του React, χρησιμεύοντας ως ακρογωνιαίος λίθος για το χειρισμό και την ενημέρωση δεδομένων στις διεπαφές χρήστη. React's χρήση Κατάσταση Το Hook παρέχει μια απλή προσέγγιση για τη διαχείριση της κατάστασης, αλλά γίνεται δυσκίνητη με πολύπλοκη κατάσταση. Εκεί είναι που το useReducer Μπαίνει ο Χουκ.

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

Κατανόηση της χρήσηςReducer Hook

ο useReducer Το Hook είναι μια ενσωματωμένη δυνατότητα που παρέχεται από το React που απλοποιεί τη διαχείριση κατάστασης τηρώντας τις αρχές του μοτίβου μειωτήρα. Σας προσφέρει μια οργανωμένη και επεκτάσιμη εναλλακτική

instagram viewer
χρήση Κατάσταση Άγκιστρο, ιδιαίτερα κατάλληλο για χειρισμό πολύπλοκων καταστάσεων.

Με τη μόχλευση του useReducer Άγκιστρο, μπορείτε να ενοποιήσετε τόσο την κατάσταση όσο και τις μεταβάσεις της σε μια ενιαία λειτουργία μειωτήρα.

Αυτή η συνάρτηση παίρνει την τρέχουσα κατάσταση και μια ενέργεια ως εισόδους, παράγοντας στη συνέχεια τη νέα κατάσταση. Λειτουργεί με τις ίδιες αρχές με τη λειτουργία μειωτήρα που χρησιμοποιείται στο JavaScript Array.prototype.reduce() μέθοδος.

Σύνταξη και Παράδειγμα Χρήσης του useReducer Hook

Η σύνταξη για τη χρήση του useReducer Το Hook έχει ως εξής:

συνθ [state, dispatch] = useReducer (reducer, originalState);

ο useReducer Η συνάρτηση δέχεται δύο ορίσματα:

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

Κατόπιν επίκλησης, το useReducer Το Hook επιστρέφει έναν πίνακα που αποτελείται από δύο στοιχεία:

  • κατάσταση (οποιαδήποτε): Δηλώνει την τρέχουσα τιμή κατάστασης.
  • αποστολή (λειτουργία): Αυτή η λειτουργία επιτρέπει την αποστολή ενεργειών για την ενημέρωση της κατάστασης.

Εξετάστε το παρακάτω παράδειγμα που επεξηγεί τη χρήση του useReducer Συνδεθείτε στη διαχείριση ενός απλού μετρητή:

εισαγωγή React, { useReducer } από'αντιδρώ';
συνθ αρχική κατάσταση = 0;
συνθ μειωτήρας = (κατάσταση, δράση) => {
διακόπτης (action.type) {
υπόθεση'αύξηση':
ΕΠΙΣΤΡΟΦΗ κατάσταση + 1;
υπόθεση'μείωση':
ΕΠΙΣΤΡΟΦΗ κατάσταση - 1;
Προκαθορισμένο:
ΕΠΙΣΤΡΟΦΗ κατάσταση;
 }
};


συνθ Μετρητής = () => {
συνθ [count, dispatch] = useReducer (reducer, originalState);
συνθ λαβήΑύξηση = () => {
 επιστολή({ τύπος: 'αύξηση' });
 };


συνθ handleDecrement = () => {
 επιστολή({ τύπος: 'μείωση' });
 };


ΕΠΙΣΤΡΟΦΗ (






};

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

Με τη μόχλευση του useReducer Hook, αρχικοποιείται η κατάσταση και αποκτώνται τόσο η τρέχουσα τιμή κατάστασης όσο και η συνάρτηση αποστολής. Η λειτουργία αποστολής χρησιμοποιείται στη συνέχεια για την ενεργοποίηση ενημερώσεων κατάστασης με το κλικ στα αντίστοιχα κουμπιά.

Κατασκευή μιας συνάρτησης μειωτήρα

Για βέλτιστη αξιοποίηση του useReducer Άγκιστρο, μπορείτε να δημιουργήσετε μια λειτουργία μειωτήρα που περιγράφει τον τρόπο ενημέρωσης της κατάστασης με βάση τις ενέργειες που αποστέλλονται. Αυτή η συνάρτηση μειωτήρα δέχεται την τρέχουσα κατάσταση και την ενέργεια ως ορίσματα και επιστρέφει τη νέα κατάσταση.

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

Εξετάστε το παρακάτω παράδειγμα μιας λειτουργίας μειωτήρα που χρησιμοποιείται για τη διαχείριση μιας λίστας εργασιών:

συνθ αρχική κατάσταση = [];
συνθ μειωτήρας = (κατάσταση, δράση) => {
διακόπτης (action.type) {
υπόθεση'Προσθήκη':
ΕΠΙΣΤΡΟΦΗ [...state, action.payload];
υπόθεση'μεταβάλλω':
ΕΠΙΣΤΡΟΦΗ state.map((να κάνω) =>
 todo.id action.payload; { ...να κάνω, ολοκληρώθηκε το: !todo.completed }: todo
 );
υπόθεση'διαγράφω':
ΕΠΙΣΤΡΟΦΗ state.filter((να κάνω) => todo.id !== action.payload);
Προκαθορισμένο:
ΕΠΙΣΤΡΟΦΗ κατάσταση;
 }
};

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

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

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

Ενέργειες αποστολής

Για την πραγματοποίηση ενημερώσεων κατάστασης που διευκολύνονται από το useReducer Άγκιστρο, η αποστολή των ενεργειών γίνεται απαραίτητη. Οι ενέργειες αντιπροσωπεύουν απλά αντικείμενα JavaScript που διευκρινίζουν τον επιθυμητό τύπο τροποποίησης κατάστασης.

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

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

Στα προηγούμενα παραδείγματα, οι ενέργειες αποστέλλονταν χρησιμοποιώντας τη σύνταξη αποστολή ({type: 'actionType'}). Ωστόσο, είναι δυνατό οι ενέργειες να περιλαμβάνουν συμπληρωματικά δεδομένα, γνωστά ως το φορτίο επί πληρωμή, το οποίο παρέχει περαιτέρω πληροφορίες σχετικά με την ενημέρωση. Για παράδειγμα:

επιστολή({ τύπος: 'Προσθήκη', φορτίο επί πληρωμή: { ταυτότητα: 1, κείμενο: "Τελειώστε την εργασία για το σπίτι", ολοκληρώθηκε το: ψευδής } });

Σε αυτό το σενάριο, το Προσθήκη Η ενέργεια περιλαμβάνει ένα αντικείμενο ωφέλιμου φορτίου που ενσωματώνει τα στοιχεία του νέου αντικειμένου που πρόκειται να ενσωματωθεί στην κατάσταση.

Διαχείριση σύνθετης κατάστασης με useReducer

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

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

Σκεφτείτε ένα σενάριο όπου α Η φόρμα react αποτελείται από πολλαπλά πεδία εισαγωγής. Αντί να διαχειρίζεστε την κατάσταση κάθε εισόδου ξεχωριστά μέσω χρήση Κατάσταση, ο useReducer Το Hook μπορεί να χρησιμοποιηθεί για την ολιστική διαχείριση της κατάστασης φόρμας.

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

συνθ αρχική κατάσταση = {
 όνομα: '',
 ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ: '',
 Κωδικός πρόσβασης: '',
 isFormValid: ψευδής,
};
συνθ μειωτήρας = (κατάσταση, δράση) => {
διακόπτης (action.type) {
υπόθεση'updateField':
ΕΠΙΣΤΡΟΦΗ { ...state, [action.payload.field]: action.payload.value };
υπόθεση'validateForm':
ΕΠΙΣΤΡΟΦΗ { ...κατάσταση, isFormValid: action.payload };
Προκαθορισμένο:
ΕΠΙΣΤΡΟΦΗ κατάσταση;
 }
};

Στο παράδειγμα, η λειτουργία μειωτήρα εξυπηρετεί δύο διαφορετικούς τύπους ενεργειών: ενημέρωση Πεδίο και validateForm. ο ενημέρωση Πεδίο Η δράση διευκολύνει την τροποποίηση ενός συγκεκριμένου πεδίου εντός της πολιτείας χρησιμοποιώντας την παρεχόμενη τιμή.

Αντίθετα, το validateForm η δράση ενημερώνει το isFormValid ιδιοκτησία με βάση το παρεχόμενο αποτέλεσμα επικύρωσης.

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

Σύγκριση useReducer με άλλες λύσεις διαχείρισης κράτους

παρόλο που το useReducer Το Hook αποτελεί ένα ισχυρό εργαλείο για τη διαχείριση του κράτους, είναι ζωτικής σημασίας να αναγνωρίσουμε τις ανομοιότητες και τις ανταλλαγές του σε σύγκριση με εναλλακτικές λύσεις διαχείρισης κατάστασης εντός του οικοσυστήματος React.

χρήση Κατάσταση

ο χρήση Κατάσταση Το Hook επαρκεί για τη διαχείριση απλών, απομονωμένων καταστάσεων μέσα σε ένα στοιχείο. Η σύνταξή του είναι πιο συνοπτική και απλή σε σύγκριση με useReducer. Ωστόσο, για περίπλοκες μεταβάσεις κατάστασης ή κατάστασης, useReducer προσφέρει μια πιο οργανωμένη προσέγγιση.

Redux

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

Το Redux αποδεικνύεται ιδανικό για εφαρμογές μεγάλης κλίμακας που απαιτούν πολύπλοκες απαιτήσεις διαχείρισης κατάστασης. Ωστόσο, για μικρότερα έργα ή απλούστερες ανάγκες κρατικής διαχείρισης, useReducer μπορεί να χρησιμεύσει ως μια ελαφριά και απλούστερη εναλλακτική.

Context API

Το Context API του React επιτρέπει την κοινή χρήση κατάστασης σε πολλαπλά εξαρτήματα χωρίς να καταφεύγουμε σε διάτρηση στηρίγματος. Σε συνδυασμό με useReducer, μπορεί να αποφέρει μια κεντρική λύση διαχείρισης κατάστασης.

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

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

Για έργα μέτριου μεγέθους, useReducer μπορεί να αποδειχθεί μια αποτελεσματική και απλούστερη εναλλακτική λύση στο Redux ή το Context API.

Απελευθερώνοντας την Απλότητα της Διαχείρισης του Κράτους

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

Όταν χρησιμοποιείται παράλληλα με το useState Hook, το useReducer μπορεί να χρησιμεύσει ως μια ελαφριά εναλλακτική βιβλιοθήκες όπως το Redux ή το Context API, ιδιαίτερα στο πλαίσιο των μικρότερων έως μεσαίων έργα.