Τι είναι το React Redux και πώς το χρησιμοποιείτε;

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

Ένα από τα κύρια σημεία πώλησης του Redux είναι ότι είναι ευέλικτο. Μπορείτε να χρησιμοποιήσετε το Redux με σχεδόν οποιοδήποτε πλαίσιο ή βιβλιοθήκη JavaScript.

Η ομάδα του Redux έχει δημιουργήσει τρεις βιβλιοθήκες, τις Redux, React-Redux και Redux Toolkit. Και οι τρεις βιβλιοθήκες συνεργάζονται για να σας προσφέρουν στο έπακρο την εμπειρία ανάπτυξης του React και σε αυτό το άρθρο εκμάθησης, θα μάθετε πώς να τις χρησιμοποιείτε.

Η σημασία του React-Redux

Αν και το Redux είναι μια ανεξάρτητη βιβλιοθήκη κρατικής διαχείρισης, η χρήση της με οποιοδήποτε πλαίσιο ή βιβλιοθήκη front-end απαιτεί βιβλιοθήκη δεσμευτικής διεπαφής χρήστη. Μια βιβλιοθήκη σύνδεσης διεπαφής χρήστη χειρίζεται τη λογική αλληλεπίδρασης κοντέινερ κατάστασης (ή αποθήκευσης), η οποία είναι ένα σύνολο προκαθορισμένων βημάτων που συνδέει ένα πλαίσιο διεπαφής με τη βιβλιοθήκη Redux.

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

Σχετίζεται με: Πώς να δημιουργήσετε την πρώτη σας εφαρμογή React με JavaScript

Εγκατάσταση του Redux στον Κατάλογο του Έργου σας

Υπάρχουν δύο τρόποι για να αποκτήσετε πρόσβαση στη βιβλιοθήκη Redux στην εφαρμογή React. Η προτεινόμενη προσέγγιση από την ομάδα του Redux είναι να χρησιμοποιήσετε την ακόλουθη εντολή κατά τη δημιουργία ενός νέου έργου React:

npx create-react-app my-app --template redux

Η παραπάνω εντολή ρυθμίζει αυτόματα τις παραμέτρους του Redux Toolkit, του React-Redux και του χώρου αποθήκευσης Redux. Ωστόσο, εάν θέλετε να χρησιμοποιήσετε το Redux σε ένα υπάρχον έργο React, τότε μπορείτε απλά να εγκαταστήσετε τη βιβλιοθήκη Redux ως εξάρτηση με την ακόλουθη εντολή:

npm εγκατάσταση redux

Ακολουθεί η βιβλιοθήκη δεσμευτικής διεπαφής χρήστη React-Redux:

npm εγκατάσταση react-redux

Και η εργαλειοθήκη Redux:

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

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

Δημιουργία καταστήματος Redux

Για να μπορέσετε να ξεκινήσετε να εργάζεστε με τη βιβλιοθήκη Redux, θα χρειαστεί να δημιουργήσετε ένα κοντέινερ κατάστασης Redux (ή αποθήκευση). Η δημιουργία ενός καταστήματος Redux είναι απαραίτητη επειδή είναι το αντικείμενο που αποθηκεύει την παγκόσμια κατάσταση εφαρμογής Redux.

Το React, όπως τα περισσότερα πλαίσια front-end, έχει ένα σημείο εισόδου στις εφαρμογές του, το οποίο είναι ένα αρχείο ή μια ομάδα αρχείων στο ανώτατο επίπεδο. ο index.html και index.js Τα αρχεία είναι δύο αρχεία που βρίσκονται στο ανώτατο επίπεδο μιας εφαρμογής React, το οποίο βρίσκεται πάνω από το App.js αρχείο και όλα τα στοιχεία της εφαρμογής.

Ετσι το index.js Το αρχείο είναι το ιδανικό μέρος για να δημιουργήσετε ένα κατάστημα Redux.

Ενημέρωση index.js με το Redux Store

εισαγωγή React από το 'react'
εισαγωγή ReactDOM από το 'react-dom'
εισαγωγή εφαρμογής από το './App'
εισαγωγή αναφοράςWebVitals από το "./reportWebVitals"
εισαγωγή {configureStore} από το "@reduxjs/toolkit"
εισαγωγή { Provider } από το 'react-redux'
εισαγωγή χρήστη από "./reducers/user"
const store = configureStore({
 περιστέλλων:{
 χρήστης
 }
})
ReactDOM.render(




,
 document.getElementById('root')
)
reportWebVitals();

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

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

Η τρίτη και τελευταία νέα εισαγωγή στο index.js το παραπάνω αρχείο είναι το μειωτήρα χρήστη, το οποίο είναι ζωτικής σημασίας για τη λειτουργία του καταστήματός σας Redux.

Γιατί είναι σημαντικός ένας μειωτής;

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

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

Δημιουργία του User Reducer

εισαγωγή { createSlice } από το "@reduxjs/toolkit";
εξαγωγή const userSlice = createSlice({
 όνομα: "χρήστης",
 initialState: { value: {email: ""}},
 μειωτήρες: {
 σύνδεση: (κατάσταση, δράση) => {
 state.value = δράση.ωφέλιμο φορτίο
 },
 }
})
εξαγωγή const {login} = userSlice.actions
εξαγωγή προεπιλεγμένου userSlice.reducer;

Μέσα στο React srcΕυρετήριο μπορείτε να δημιουργήσετε ένα κατάλογος μειωτήρα, όπου θα αποθηκεύσετε το δικό σας μειωτήρα χρήστη και οποιονδήποτε άλλο μειωτήρα θέλετε να προσθέσετε στο κατάστημά σας Redux. ο user.js το παραπάνω αρχείο εισάγει το createSlice λειτουργία από το Redux Toolkit.

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

Το αρχείο user.js εξάγει τον μειωτήρα σύνδεσης. Το στοιχείο σύνδεσης το εισάγει και το χρησιμοποιεί στο useDispatch() άγκιστρο.

Δημιουργία του στοιχείου εισόδου

εισαγωγή Αντιδράστε από το 'react';
Εισαγωγή συνδέσμου από το '@mui/material/Link';
εισαγωγή TextField από το '@mui/material/TextField';
εισαγωγή Τυπογραφίας από το '@mui/material/Typography';
εισαγωγή { Button, Box } από το '@mui/material';
εισαγωγή { useDispatch } από το 'react-redux';
εισαγωγή { login } από το '../reducers/user';
εισαγωγή { useState } από το 'react';
συνάρτηση Signin() {
 const dispatch = useDispatch()
 const [email, setEmail] = useState('')
 const handleSubmit = () => {
 αποστολή (είσοδος ({email: email}))
 }
ΕΠΙΣΤΡΟΦΗ (


sx={{
μου: 8,
οθόνη: 'flex',
flexDirection: 'στήλη',
alignItems: 'κέντρο',
}}>
 Συνδεθείτε 
label="Διεύθυνση ηλεκτρονικού ταχυδρομείου"
απαιτείται
id = "email"
όνομα = "email"
περιθώριο = "κανονικό"
onChange={(e) => setEmail (e.target.value)}
/>
label="Κωδικός πρόσβασης"
απαιτείται
id = "κωδικός πρόσβασης"
όνομα = "κωδικός πρόσβασης"
πληκτρολογήστε "κωδικός πρόσβασης"
περιθώριο = "κανονικό"
/>
href="#"
sx={{mr: 12, mb: 2}}
>
ξεχάσω τον κωδικό πρόσβασης;

παραλλαγή = "περιέχεται"
sx={{mt: 2}}
onClick={handleSubmit}
>
Συνδεθείτε





);
}
εξαγωγή προεπιλογή Είσοδος.

Το παραπάνω στοιχείο σύνδεσης χρησιμοποιεί τη βιβλιοθήκη MUI. Δημιουργεί μια απλή φόρμα σύνδεσης που απαιτεί email και κωδικό πρόσβασης χρήστη. Κάνοντας κλικ στο κουμπί σύνδεσης θα ενεργοποιηθεί ένα Λειτουργία onClick, που θα καλέσει το handleSubmit λειτουργία.

ο handleSubmit η συνάρτηση χρησιμοποιεί το useState() και useDispact() γάντζοι μαζί με το μειωτήρας σύνδεσης για να διαθέσετε τη διεύθυνση email ενός ενεργού χρήστη στο κατάστημα Redux. Από το κατάστημα Redux, κάθε στοιχείο στην εφαρμογή React έχει πλέον πρόσβαση στο email ενός ενεργού χρήστη.

Σχετίζεται με: Hooks: The Hero of React Το ακόλουθο στοιχείο ενεργού χρήστη ανακτά τη διεύθυνση email ενός ενεργού χρήστη με τη βοήθεια του Άγκιστρο useSelector(). και το αποδίδει στη διεπαφή χρήστη της εφαρμογής.

Το αρχείο ActiveUser.js

εισαγωγή Αντιδράστε από το "react"?
εισαγωγή { useSelector } από το "react-redux";
συνάρτηση ActiveUsers() {
 const user = useSelector((state) => state.user.value)
 ΕΠΙΣΤΡΟΦΗ (


Ενεργοί χρήστες

 {user.email} 




 );
}

Το ενημερωμένο αρχείο App.js

Ρίξτε μια ματιά σε αυτό το κομμάτι κώδικα:

εισαγωγή Αντιδράστε από το "react"? εισαγωγή ActiveUsers από το "./components/ActiveUsers". εισαγωγή Είσοδος από "./components/Signin";
λειτουργία Εφαρμογή() {
ΕΠΙΣΤΡΟΦΗ ( 
);
}
εξαγωγή προεπιλεγμένη εφαρμογή? 

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

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

Το ενημερωμένο UI

Πότε πρέπει να χρησιμοποιήσετε το Redux;

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

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

Ωστόσο, εάν έχετε μια κατάσταση που χρησιμοποιείται μόνο από ένα ή δύο στοιχεία το πολύ, τότε μια καλύτερη επιλογή μπορεί να είναι τα React props.

Πώς να χρησιμοποιήσετε τα Props στο ReactJS

Αν ψάχνετε για συμβουλές για το πώς να χρησιμοποιείτε τα στηρίγματα στο ReactJS, βρίσκεστε στο σωστό μέρος.

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα