Απλούστερη διαχείριση κατάστασης με το UseImmer στο React

Η αντιμετώπιση της κατάστασης στο React μπορεί μερικές φορές να είναι μια πρόκληση, ειδικά όταν πρόκειται για την κατανόηση των μεταλλάξεων και τον σωστό χειρισμό των αναφορών. Όταν χρησιμοποιείτε τον setter useState, συχνά πρέπει να δημιουργείτε νέους πίνακες ή αντικείμενα για να διασφαλίσετε ότι το React αναγνωρίζει τις αλλαγές σας. Αυτό μπορεί να γίνει γρήγορα συγκεχυμένο και να απαιτεί πολύ κώδικα. Μια εναλλακτική λύση είναι ο useImmer, ο οποίος σας επιτρέπει να αλλάζετε την κατάσταση με έναν πολύ πιο διαισθητικό τρόπο. Σε αυτόν τον οδηγό, θα εξετάσουμε βήμα προς βήμα τη διαδικασία χρήσης του useImmer αντί του useState.

Βασικά συμπεράσματα

• Το useImmer είναι ένας αντικαταστάτης του useState που διευκολύνει τον χειρισμό της μεταβλητής κατάστασης στο React.
• Με το useImmer, μπορείτε να κάνετε αλλαγές απευθείας σε πίνακες και αντικείμενα χωρίς να χρειάζεται να δημιουργείτε νέες αναφορές χειροκίνητα.
• Οι μεταλλάξεις μετατρέπονται αυτόματα σε νέες, αμετάβλητες καταστάσεις, γεγονός που καθιστά τον χειρισμό πολύ πιο εύκολο.

Οδηγίες βήμα προς βήμα

Εγκατάσταση του useImmer

Αρχικά, πρέπει να βεβαιωθείτε ότι το useImmer είναι εγκατεστημένο. Αυτό γίνεται με την εντολή τερματικού

npm install always

Μόλις ολοκληρωθεί η εγκατάσταση, θα πρέπει να ελέγξετε ότι το πακέτο εμφανίζεται σωστά στο αρχείο package.json. Θα πρέπει να το βλέπετε πάντα στη λίστα των εξαρτήσεων.

Χρήση του useImmer

Τώρα που το useImmer έχει εγκατασταθεί, μπορείτε να το χρησιμοποιήσετε στο έργο σας. Απλά εισάγετε το στο αρχείο όπου θέλετε να διαχειριστείτε την κατάσταση:

import { useImmer } from 'use-immer',

Ξεκινώντας με τη χρήση του useImmer

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

const [videos, setVideos] = useImmer(initialVideos),

Σε αυτό το παράδειγμα, το initialVideos είναι η αρχική τιμή για την κατάστασή σας. Μπορείτε τώρα να χρησιμοποιήσετε τη setVideos για να κάνετε αλλαγές στην κατάστασή σας.

Μεταλλάξεις με useImmer

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

setVideos(draft => { draft.push(newVideo); // newVideo είναι το αντικείμενο που θα προσθέσετε }),

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

Αλλαγές σε υπάρχουσες καταχωρήσεις

Αν θέλετε να αλλάξετε μια υπάρχουσα καταχώρηση, αυτό είναι επίσης απλό με τη βοήθεια του useImmer. Το μόνο που έχετε να κάνετε είναι να βρείτε την καταχώρηση στον πίνακα και να κάνετε τις επιθυμητές αλλαγές:

setVideos(draft => { const videoToEdit = draft.find(video => video.id === targetId); if (videoToEdit) { videoToEdit.title = newTitle; // Αλλαγή του τίτλου videoToEdit.source = newSource; // Αλλαγή της πηγής } }),

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

Διαγραφή μιας εγγραφής

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

setVideos(draft => { const index = draft.findIndex(video => video.id === targetId); if (index!== -1) { draft.splice(index, 1); // αφαιρέστε το βίντεο } }),

Αυτό αφαιρεί το βίντεο με το αντίστοιχο αναγνωριστικό από τον πίνακα draft.

Ενσωμάτωση σε υπάρχοντα έργα

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

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

Περίληψη

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