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

Ουσιαστικά, οι διαχειριστές κατάστασης επιτρέπουν στις εφαρμογές να έχουν πρόσβαση και να επεξεργάζονται τα δεδομένα για να παράγουν τα επιθυμητά αποτελέσματα. Το Next.js παρέχει υποστήριξη για λύσεις διαχείρισης πολλαπλών καταστάσεων. Ωστόσο, σε αυτόν τον οδηγό, θα επικεντρωθούμε στη χρήση του Redux Toolkit για διαχείριση κατάστασης.

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

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

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

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

Για να ξεπεράσουμε αυτές τις προκλήσεις, Redux Toolkit (RTK) έρχεται στη διάσωση. Αποσκοπεί κυρίως στον εξορθολογισμό της εμπειρίας ανάπτυξης κατά την εργασία με το Βιβλιοθήκη κρατικής διαχείρισης Redux. Παρέχει ένα σύνολο εργαλείων και βοηθητικών προγραμμάτων που απλοποιούν τις κοινές εργασίες Redux, εξαλείφοντας την ανάγκη για υπερβολικό κώδικα λέβητα.

Τώρα, ας βουτήξουμε στη χρήση του Redux Toolkit για τη διαχείριση της κατάστασης στις εφαρμογές Next.js. Για να ξεκινήσετε, δημιουργήστε ένα έργο Next.js και εγκαταστήστε τις απαιτούμενες εξαρτήσεις ακολουθώντας τα παρακάτω βήματα.

1. Δημιουργήστε ένα νέο έργο Next.js τοπικά εκτελώντας την παρακάτω εντολή στο τερματικό σας:

   npx create-next-app@latest next-redux-toolkit

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

   cd next-redux-toolkit

3. Τέλος, εγκαταστήστε τις απαραίτητες εξαρτήσεις στο έργο σας χρησιμοποιώντας npm, ο διαχειριστής πακέτων Node.

   npm εγκατάσταση @reduxjs/toolkit react-redux

Μόλις ρυθμίσετε ένα βασικό έργο Next.js, είστε πλέον έτοιμοι να δημιουργήσετε μια δοκιμαστική εφαρμογή Next.js που χρησιμοποιεί το Redux Toolkit για διαχείριση κατάστασης.

Μπορείτε να βρείτε τον κωδικό αυτού του έργου σε αυτό Αποθετήριο GitHub.

Διαμορφώστε το Redux Store

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

Για να δημιουργήσετε ένα κατάστημα Redux, δημιουργήστε ένα νέο redux φάκελο στον ριζικό κατάλογο του έργου Next.js. Μέσα σε αυτόν τον φάκελο, δημιουργήστε έναν νέο store.js αρχείο και προσθέστε τον ακόλουθο κώδικα:

εισαγωγή {configureStore} από'@reduxjs/toolkit';
εισαγωγή προφίλΜειωτής από'./reducers/profileSlice';
εξαγωγήΠροκαθορισμένο configureStore({
 περιστέλλων:{
 προφίλ: profileReducer
 }
})

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

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

Ρυθμίζοντας το κατάστημα Redux, ο κώδικας δημιουργεί την βασική δομή για τη διαχείριση της κατάστασης της εφαρμογής χρησιμοποιώντας το Redux Toolkit.

Προσδιορίστε το State Slices

Τα τμήματα καταστάσεων Redux είναι στοιχεία που ενσωματώνουν τη λογική για τη διαχείριση της κατάστασης συγκεκριμένων στοιχείων δεδομένων εντός του διαμορφωμένου χώρου αποθήκευσης redux. Αυτές οι φέτες δημιουργούνται χρησιμοποιώντας το createSlice λειτουργία, η οποία δημιουργεί αυτόματα τον μειωτήρα, τους δημιουργούς δράσης και τους τύπους ενεργειών για το slice.

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

εισαγωγή {createSlice} από'@reduxjs/toolkit';
συνθ profileSlice = createSlice({
 όνομα: 'Προφίλ',
 αρχική κατάσταση: {
 όνομα: 'κανένας'
 },
 μειωτήρες: {
 SET_NAME: (κατάσταση, δράση) => {
 state.name = action.payload
 }
}})
εξαγωγήσυνθ {SET_NAME} = profileSlice.actions;
εξαγωγήΠροκαθορισμένο profileSlice.reducer;

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

Επιπλέον, το αντικείμενο slice δέχεται επίσης α μειωτήρες ιδιότητα που καθορίζει τους χειριστές ενεργειών για αυτό το slice. Σε αυτήν την περίπτωση, μια μεμονωμένη συνάρτηση μειωτήρα ονομάζεται SET_NAME. Ουσιαστικά, μόλις καλέσετε αυτήν τη συνάρτηση, θα ενημερώσει την ιδιότητα ονόματος της πολιτείας με τα παρεχόμενα δεδομένα.

ο createSlice Η λειτουργία δημιουργεί αυτόματα δημιουργούς ενεργειών και τύπους ενεργειών με βάση τους καθορισμένους μειωτήρες. Το εξαγόμενο SET_NAME δημιουργός δράσης και profileSlice.reducer αντιπροσωπεύει τον δημιουργό δράσης και τη λειτουργία μειωτήρα για το τμήμα προφίλ.

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

Δημιουργήστε ένα στοιχείο για να δοκιμάσετε τη λειτουργία διαχείρισης κατάστασης του RTK

Ανοιξε το index.js αρχείο στο σελίδες καταλόγου, διαγράψτε τον κώδικα του boilerplate Next.js και προσθέστε τον ακόλουθο κώδικα.

εισαγωγή στυλ από'@/styles/Home.module.css'
εισαγωγή {useRef} από'αντιδρώ'
εισαγωγή {useSelector, useDispatch} από'react-redux'
εισαγωγή {SET_NAME} από"../../redux/reducers/profileSlice"
λειτουργίαDisplayName(){
συνθ {name} = useSelector((κατάσταση) => state.profile)
ΕΠΙΣΤΡΟΦΗ (

 Είμαι το {όνομα} !!</h1> 
 ) }
εξαγωγήΠροκαθορισμένολειτουργίαΣπίτι() {
συνθ inputName = useRef()
συνθ dispatch = useDispatch()
λειτουργίαΥποβολήΌνομα() {
κονσόλα.log (inputName.current.value)
 αποστολή (SET_NAME(inputName.current.value))
 }
ΕΠΙΣΤΡΟΦΗ (
 <>

"εισάγετε όνομα" ref={inputName} />
Εισαγάγετε όνομα</button>

 </main>
 </>
 )}

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

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

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

Ενημερώστε το Αρχείο _app.js

Τέλος, για να διαμορφώσετε το Redux Toolkit για χρήση σε ολόκληρη την εφαρμογή Next.js, πρέπει να τυλίξετε την εφαρμογή με το Πάροχος Redux—αυτό διασφαλίζει ότι το κατάστημα Redux και οι διαθέσιμες καταστάσεις είναι προσβάσιμες σε όλα τα στοιχεία του εφαρμογή.

Ανοιξε το _app.js αρχείο και ενημερώστε το ως εξής:

εισαγωγή {Προμηθευτής} από'react-redux'
εισαγωγή κατάστημα από"../../redux/store"
εξαγωγήΠροκαθορισμένολειτουργίαApp({ Component, pageProps }) {
ΕΠΙΣΤΡΟΦΗ (


 </Παροχέας> )
}

Τώρα, προχωρήστε και ξεκινήστε τον διακομιστή ανάπτυξης για να αντικατοπτρίζει τις αλλαγές που κάνατε και μεταβείτε http://localhost: 3000 στο πρόγραμμα περιήγησής σας για να δοκιμάσετε την εφαρμογή.

npm εκτέλεση dev

Χειρισμός Επανυδάτωσης δεδομένων κατά την Επαναφόρτωση σελίδας

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

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

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

Ένα από τα πλεονεκτήματα της χρήσης του Redux Toolkit στις εφαρμογές Next.js είναι η απλότητα και οι φιλικές του δυνατότητες για προγραμματιστές. Μειώνει σημαντικά τον κωδικό λέβητα που απαιτείται για τον καθορισμό ενεργειών, μειωτών και διαμόρφωσης αποθήκευσης, καθιστώντας ευκολότερη και πιο αποτελεσματική την εργασία με το Redux στη διαχείριση κατάστασης.