Πώς να λάβετε δεδομένα στο React χρησιμοποιώντας το ερώτημα Redux Toolkit

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

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

Ερώτημα Redux Toolkit (RTK Query) είναι ένα εργαλείο ανάκτησης δεδομένων χτισμένο πάνω από το Redux Toolkit. Η επίσημη τεκμηρίωσή του περιγράφει το RTK Query ως «ένα ισχυρό εργαλείο ανάκτησης και αποθήκευσης δεδομένων που έχει σχεδιαστεί για να απλοποιεί συνήθεις περιπτώσεις φόρτωσης δεδομένων σε μια εφαρμογή Ιστού, εξαλείφοντας την ανάγκη χειροκίνητης λογικής ανάκτησης και αποθήκευσης δεδομένων ο ίδιος".

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

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

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

Για να ξεκινήσετε, μπορείτε να περιστρέψετε γρήγορα ένα έργο React τοπικά χρησιμοποιώντας το Δημιουργήστε την εφαρμογή React εντολή.

mkdir React-RTQ
cd React-RTQ
npx create-react-app react-rtq-example
cd react-rtq-παράδειγμα 
npm έναρξη

Εναλλακτικά, μπορείτε ρυθμίστε ένα έργο React χρησιμοποιώντας το Vite, ένα νέο εργαλείο κατασκευής και διακομιστή ανάπτυξης για εφαρμογές web.

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

Εγκαταστήστε τις Απαιτούμενες Εξαρτήσεις

Μόλις ξεκινήσετε και εκτελείτε το έργο React, προχωρήστε και εγκαταστήστε τα παρακάτω πακέτα.

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

Ορίστε ένα τμήμα API

Ένα slice API είναι ένα στοιχείο που περιλαμβάνει την απαραίτητη λογική Redux για την ενοποίηση και την αλληλεπίδραση με καθορισμένα τελικά σημεία API. Παρέχει έναν τυποποιημένο τρόπο ορισμού τόσο των τελικών σημείων του ερωτήματος για την ανάκτηση δεδομένων όσο και των τελικών σημείων μετάλλαξης για την τροποποίηση των δεδομένων.

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

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

εισαγωγή {createApi, fetchBaseQuery } από"@reduxjs/toolkit/query/react";
εξαγωγήσυνθ productsApi = createApi({
 ReducerPath: "productsAp",
 baseQuery: fetchBaseQuery({ baseUrl: " https://dummyjson.com/" }),
 καταληκτικά σημεία: (οικοδόμος) => ({
 getAllProducts: builder.query({
 ερώτηση: () =>"προϊόντα",
 }),
 getProduct: builder.query({
 ερώτηση: (προϊόν) =>`προϊόντα/αναζήτηση; q=${product}`, 
 }),
 }),
});
εξαγωγήσυνθ { useGetAllProductsQuery, useGetProductQuery } = productsApi;

Αυτός ο κώδικας ορίζει ένα τμήμα API που ονομάζεται προϊόνταApi χρησιμοποιώντας Redux Toolkit createApi λειτουργία. Το τμήμα API έχει τις ακόλουθες ιδιότητες:

• ΕΝΑ ReducerPath ιδιοκτησία - ορίζει το όνομα του μειωτήρα στο κατάστημα Redux.
• ο baseQuery ιδιοκτησία - καθορίζει τη βασική διεύθυνση URL για όλα τα αιτήματα API που χρησιμοποιούν το fetchBaseQuery λειτουργία που παρέχεται από το Redux Toolkit.
• API τελικά σημεία - καθορίστε τα διαθέσιμα τελικά σημεία για αυτό το τμήμα API χρησιμοποιώντας το οικοδόμος αντικείμενο. Σε αυτήν την περίπτωση, ο κώδικας ορίζει δύο τελικά σημεία.

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

Αυτή η προσέγγιση απλοποιεί τη διαχείριση κατάστασης και την ανάκτηση δεδομένων στην εφαρμογή React.

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

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

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

εισαγωγή { configureStore } από"@reduxjs/toolkit";
εισαγωγή { productsApi } από"./features/apiSlice";
εξαγωγήσυνθ store = configureStore({
 μειωτής: {
 [productsApi.reducerPath]: productsApi.reducer,
 },
 ενδιάμεσο λογισμικό: (getDefaultMiddleware) =>
 getDefaultMiddleware().concat (productsApi.middleware),
});

Αυτός ο κώδικας δημιουργεί ένα νέο κατάστημα Redux, με δύο κύρια τμήματα διαμόρφωσης:

1. Περιστέλλων: Αυτό καθορίζει τον τρόπο με τον οποίο το κατάστημα πρέπει να χειρίζεται τις ενημερώσεις στην κατάσταση. Σε αυτή την περίπτωση, το productsApi.reducer μεταβιβάζεται ως λειτουργία μειωτήρα και του δίνεται ένα μοναδικό κλειδί μείωσης διαδρομής για να το αναγνωρίσει στη συνολική κατάσταση του καταστήματος.
2. Middleware: Αυτό ορίζει τυχόν πρόσθετο ενδιάμεσο λογισμικό που θα πρέπει να ισχύει για το κατάστημα.

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

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

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

Στον κατάλογο src, δημιουργήστε ένα νέο συστατικά φάκελο με ένα νέο αρχείο μέσα: Data.js.

Προσθέστε αυτόν τον κώδικα στο αρχείο Data.js:

εισαγωγή { useGetAllProductsQuery } από"../features/apiSlice";
εισαγωγή React, { useState } από"αντιδρώ";
εισαγωγή"./product.component.css";
εξαγωγήσυνθ Δεδομένα = () => {
συνθ { data, error, isLoading, refetch } = useGetAllProductsQuery();
συνθ [productsData, setProductsData] = useState([]);
συνθ handleDisplayData = () => {
 refetch();
 setProductsData (data?.products);
 };
ΕΠΙΣΤΡΟΦΗ (
"προϊόν-δοχείο">
"κουμπί προϊόντος" onClick={handleDisplayData}>
 Εμφάνιση δεδομένων
 </button>
 {isLoading && <div>Φόρτωση...div>}
 {λάθος && <div>Σφάλμα: {error.message}div>}
"προϊόν-ετικέτα">Προϊόντα:</label>
 {productsData && productsData.length > 0 && (


 {productsData.slice(0, 4).χάρτης((προϊόν) => (
"λεπτομέρειες προιόντος" key={product.id}>
Όνομα: {product.title}</p>

Περιγραφή: {product.description}</p>

Τιμή: {product.price}</p>
 </li>
 ))}
 </ul>
 )}
 </div>
 );
};

Αυτός ο κώδικας δείχνει ένα στοιχείο React που χρησιμοποιεί το άγκιστρο useGetAllProductsQuery που παρέχεται από το τμήμα API για την ανάκτηση δεδομένων από το καθορισμένο τελικό σημείο API.

Όταν ο χρήστης κάνει κλικ στο κουμπί Εμφάνιση δεδομένων, εκτελείται η συνάρτηση handleDisplayData, στέλνοντας ένα αίτημα HTTP στο API για την ανάκτηση δεδομένων προϊόντος. Μόλις ληφθεί η απάντηση, η μεταβλητή δεδομένων των προϊόντων ενημερώνεται με τα δεδομένα απόκρισης. Τέλος, το στοιχείο αποδίδει μια λίστα με λεπτομέρειες προϊόντος.

Ενημερώστε το στοιχείο εφαρμογής

Κάντε τις ακόλουθες αλλαγές στον κώδικα στο αρχείο App.js:

εισαγωγή"./App.css";
εισαγωγή { Δεδομένα } από"./components/Data";
εισαγωγή { κατάστημα } από"./κατάστημα";
εισαγωγή { Πάροχος } από"react-redux";
εισαγωγή { ApiProvider } από"@reduxjs/toolkit/query/react";
εισαγωγή { productsApi } από"./features/apiSlice";
λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (


"Εφαρμογή">

 </div>
 </ApiProvider>
 </Provider>
 );
}
εξαγωγήΠροκαθορισμένο Εφαρμογή?

Αυτός ο κώδικας αναδιπλώνει το στοιχείο δεδομένων με δύο παρόχους. Αυτοί οι δύο πάροχοι παραχωρούν στο στοιχείο πρόσβαση στο κατάστημα Redux και στις λειτουργίες RTK Query, επιτρέποντάς του να ανακτά και να εμφανίζει δεδομένα από το API.

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

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