Ανακαλύψτε τι είναι τα Sagas και πώς μπορούν να σας βοηθήσουν να γράψετε πιο ισχυρό, ευέλικτο κώδικα.
Το React και το Redux είναι δημοφιλή εργαλεία ανάπτυξης ιστού για τη διαχείριση κατάστασης και την ανάπτυξη δυναμικών διεπαφών χρήστη.
Η πρόσβαση σε πληροφορίες μπορεί να είναι δύσκολη και χρονοβόρα, ειδικά όταν αντιμετωπίζουμε ασύγχρονα συμβάντα. Το Redux-Saga, ένα εύχρηστο πακέτο ενδιάμεσου λογισμικού που διαχειρίζεται ασύγχρονες δραστηριότητες, μπορεί να απλοποιήσει αυτή τη διαδικασία.
Μάθετε πώς το React για τη δημιουργία μιας εφαρμογής που ανακτά δεδομένα από το Redux-Saga.
Κατανόηση του Redux-Saga
Το Redux-Saga είναι ένα πακέτο ενδιάμεσου λογισμικού που διευκολύνει τη διαχείριση και τη δοκιμή παρενεργειών όπως η πρόσβαση στον χώρο αποθήκευσης του προγράμματος περιήγησης και τα ασύγχρονα αιτήματα API. Η χρήση συναρτήσεων γεννήτριας κάνει τον ασύγχρονο κώδικα να φαίνεται σύγχρονος, καθιστώντας ευκολότερο τον συλλογισμό και τον εντοπισμό σφαλμάτων.
Το Redux-Saga λειτουργεί αναζητώντας συγκεκριμένες ενέργειες Redux και ενεργοποιώντας Sagas, που είναι λειτουργίες δημιουργίας παρενεργειών. Το Sagas μπορεί να εκτελέσει ασύγχρονες λειτουργίες, όπως τη λήψη δεδομένων από ένα API και, στη συνέχεια, να αποστείλει μια νέα ενέργεια Redux για να ενημερώσει την κατάσταση.
Πάρτε το παράδειγμα χρήσης του Redux-Saga για τη διαχείριση ασύγχρονων κλήσεων API. Ξεκινήστε δημιουργώντας μια ενέργεια Redux που ξεκινά τη διαδικασία συλλογής δεδομένων:
εξαγωγήσυνθ FETCH_DATA = "FETCH_DATA";
εξαγωγήσυνθ fetchData = (παραμέτρους) => ({
τύπος: FETCH_DATA,
ωφέλιμο φορτίο: params,
});
Το ωφέλιμο φορτίο της ενέργειας, FETCH_DATA, περιλαμβάνει οποιεσδήποτε βασικές παραμέτρους, όπως το τελικό σημείο του API και τις παραμέτρους αιτήματος.
Στη συνέχεια, ορίστε ένα Saga που ακούει τη δραστηριότητα FETCH_DATA και κάνει τη συλλογή δεδομένων:
εισαγωγή { call, put, takeLatest } από'redux-saga/effects';
εισαγωγή αξιος από'αξιος';εξαγωγήλειτουργία* fetchDataSaga(δράση) {
δοκιμάστε {
συνθ ανταπόκριση = απόδοση παραγωγής κλήση (axios.get, action.payload.endpoint, {
params: action.payload.params,
});απόδοση παραγωγής βάζω({ τύπος: "FETCH_DATA_SUCCESS", φορτίο επί πληρωμή: answer.data });
} σύλληψη (λάθος) {
απόδοση παραγωγής βάζω({ τύπος: "FETCH_DATA_ERROR", φορτίο επί πληρωμή: λάθος });
}
}
εξαγωγήλειτουργία* watchFetchData() {
απόδοση παραγωγής takeLatest (FETCH_DATA, fetchDataSaga);
}
Αυτό το Saga πραγματοποιεί μια κλήση API στο αξιος βιβλιοθήκη χρησιμοποιώντας το κλήση αποτέλεσμα. Στη συνέχεια, στέλνει τα δεδομένα που ανακτήθηκαν ως νέο ωφέλιμο φορτίο ενέργειας Redux με τον τύπο FETCH_DATA_SUCCESS. Εάν παρουσιαστεί σφάλμα, στέλνει μια νέα ενέργεια Redux με το αντικείμενο σφάλματος ως ωφέλιμο φορτίο και έναν τύπο FETCH_DATA_ERROR.
Τέλος, πρέπει να καταχωρήσετε το Saga στο κατάστημα Redux χρησιμοποιώντας το ενδιάμεσο λογισμικό redux-saga:
εισαγωγή { applicationMiddleware, createStore } από"redux";
εισαγωγή createSagaMiddleware από'redux-saga';
εισαγωγή rootReducer από'./reducers';
συνθ sagaMiddleware = createSagaMiddleware();
συνθ store = createStore (rootReducer, applicationMiddleware (sagaMiddleware));
sagaMiddleware.run (watchFetchData);
Με την εγγραφή του watchFetchData Saga με το νέο στιγμιότυπο ενδιάμεσο λογισμικό, αυτός ο κώδικας δημιουργεί έναν άλλο redux-saga. Το ενδιάμεσο λογισμικό έχει ρυθμιστεί στο κατάστημα Redux χρησιμοποιώντας ApplyMiddleware.
Το Redux-Saga, γενικά, παρέχει μια ισχυρή και ευέλικτη προσέγγιση για τη διαχείριση ασύγχρονων δραστηριοτήτων εντός Το Redux της React εφαρμογές. Μπορείτε να βελτιώσετε την ανάκτηση δεδομένων και να δημιουργήσετε ευκολότερο κώδικα για δοκιμή, συντήρηση και ενημέρωση χρησιμοποιώντας το Sagas για τον έλεγχο σφαλμάτων κώδικα.
Συνήθη ζητήματα ανάκτησης δεδομένων σε εφαρμογές React
Υπάρχουν μερικές δυσκολίες που βρίσκουν συχνά οι προγραμματιστές κατά τη χρήση της ανάκτησης δεδομένων του React. Ακολουθούν μερικά παραδείγματα:
- Διαχείριση ασύγχρονων ενεργειών: Πρόκειται για πληροφορίες που παρέχονται από μια διεπαφή προγραμματισμού που παρακολουθεί τις μη ταυτόχρονες λειτουργίες χωρίς να παρεμβαίνει στη διεπαφή χρήστη (UI). Η εργασία με πολλά αιτήματα API ή δεδομένα που εξαρτώνται από άλλα δεδομένα μπορεί να το κάνει δύσκολο.
- Χειρισμός σφαλμάτων: Οι κλήσεις API μπορεί να αποτύχουν και είναι ζωτικής σημασίας να χειρίζεστε σωστά αυτά τα σφάλματα. Αυτό περιλαμβάνει την παροχή μηνυμάτων σφάλματος στον χρήστη και τη δυνατότητα να υποβάλει εκ νέου το αίτημα.
- Ενημέρωση του καταστήματος Redux: Θα πρέπει να αποθηκεύσετε πληροφορίες που έχετε αποκτήσει από ένα API στο κατάστημα Redux, ώστε άλλα στοιχεία να έχουν πρόσβαση σε αυτό. Είναι σημαντικό να ενημερώνετε το κατάστημα χωρίς να παρεμβαίνετε ή να καταστρέψετε τα ήδη υπάρχοντα δεδομένα.
Πώς να χρησιμοποιήσετε το Redux-Saga για ανάκτηση δεδομένων στο React
Η χρήση του Redux-Saga για ανάκτηση δεδομένων σάς επιτρέπει να διαχωρίσετε τη λογική για την πραγματοποίηση κλήσεων API και την αντιμετώπιση της απόκρισης από τα στοιχεία του React. Ως αποτέλεσμα, μπορείτε να εστιάσετε στην απόδοση των δεδομένων και στην αντίδραση στις αλληλεπιδράσεις των χρηστών, ενώ το Sagas χειρίζεται την ασύγχρονη ανάκτηση δεδομένων και τη διαχείριση σφαλμάτων.
Πρέπει να καταχωρήσετε το watchFetchData Έπος με το Redux-Saga ενδιάμεσο λογισμικό για να χρησιμοποιήσετε το Sagas στο κατάστημά μας Redux:
// src/store.js
εισαγωγή { createStore, applicationMiddleware } από"redux";
εισαγωγή createSagaMiddleware από'redux-saga';
εισαγωγή rootReducer από'./reducers';
εισαγωγή { watchFetchData } από'./sagas/dataSaga';συνθ sagaMiddleware = createSagaMiddleware();
συνθ store = createStore (rootReducer, applicationMiddleware (sagaMiddleware));
sagaMiddleware.run (watchFetchData);
εξαγωγήΠροκαθορισμένο κατάστημα;
Αυτός ο κωδικός καταχωρεί το sagaMiddleware με το κατάστημα Redux χρησιμοποιώντας το appMiddleware λειτουργία και το createSagaMiddleware μέθοδος του redux-saga πακέτο. Στη συνέχεια, χρησιμοποιώντας το τρέξιμο μέθοδο, εκτελεί το watchFetchData Επος.
Η ρύθμιση του Redux-Saga έχει ολοκληρωθεί τώρα που κάθε στοιχείο είναι στη θέση του. Το Saga χρησιμοποιεί το fetchDataApi λειτουργία για ανάκτηση των δεδομένων όταν το στοιχείο React στέλνει την ενέργεια FETCH_DATA_REQUEST. Εάν η προγραμματισμένη λήψη δεδομένων είναι επιτυχής, αποστέλλει μια άλλη δραστηριότητα με τα δεδομένα που ανακτήθηκαν. Εάν υπάρχει σφάλμα, στέλνει μια νέα ενέργεια με το αντικείμενο σφάλματος.
// src/components/DataComponent.jsεισαγωγή React, { useEffect } από'αντιδρώ';
εισαγωγή { useDispatch, useSelector } από'react-redux';
εισαγωγή { fetchDataRequest } από"../actions/dataActions";συνθ DataComponent = () => {
συνθ dispatch = useDispatch();
συνθ { data, isLoading, error } = useSelector((κατάσταση) => state.data);useEffect(() => {
αποστολή (fetchDataRequest({ παρά 1: "τιμή 1", παραμ.2: "τιμή 2" }));
}, [αποστολή]);αν (isLoading) {
ΕΠΙΣΤΡΟΦΗ<div>Φόρτωση...div>;
}αν (λάθος) {
ΕΠΙΣΤΡΟΦΗ<div>Σφάλμα: {error.message}div>;
}ΕΠΙΣΤΡΟΦΗ (
{data.map((είδος) => ({item.name}</div>
))}
</div>
);
};
εξαγωγήΠροκαθορισμένο DataComponent;
Στο παραπάνω παράδειγμα, χρησιμοποιείτε το χρήση Επιλογέα συνδέστε το στοιχείο React για να λάβετε τα δεδομένα, είναι Φόρτωση, και λάθος τιμές από το κατάστημα Redux. Αποστέλλετε επιπλέον την ενέργεια FETCH_DATA_REQUEST χρησιμοποιώντας το Άγκιστρο useEffect(). όταν το εξάρτημα τοποθετηθεί. Αποδίδετε τα δεδομένα, το μήνυμα φόρτωσης ή το μήνυμα σφάλματος ανάλογα με το δεδομένα αξίες, είναι Φόρτωση, και λάθος.
Αξιοποιώντας το Redux-Saga για ανάκτηση δεδομένων, διαχείριση ασύγχρονων αιτημάτων API σε μια εφαρμογή React μπορεί να εξορθολογιστεί σημαντικά. Μπορείτε να δημιουργήσετε πιο διατηρήσιμο και αρθρωτό κώδικα απομονώνοντας τη λογική κλήσης API από τα στοιχεία σας και διαχειριζόμενοι την ασύγχρονη ροή στο Sagas.
Βέλτιστες πρακτικές για τη χρήση του Redux-Saga για την ανάκτηση δεδομένων
Ακολουθήστε αυτές τις βέλτιστες πρακτικές κατά τη χρήση του Redux-Saga για ανάκτηση δεδομένων:
- Χρησιμοποιήστε διαφορετικά Sagas για κάθε λειτουργία ανάκτησης δεδομένων. Συνιστάται να διαχωρίζετε ένα Saga για κάθε διαδικασία ανάκτησης δεδομένων αντί να συμπεριλάβετε όλη τη λογική σε ένα μόνο Saga. Η διατήρηση και η αλλαγή του κώδικα είναι πιο απλή αφού μπορείτε να βρείτε αμέσως τα σχετικά Sagas για ορισμένες δραστηριότητες.
- Χρησιμοποιήστε τον ενσωματωμένο χειρισμό σφαλμάτων του Redux-Saga. Μπορείτε να χρησιμοποιήσετε το μπλοκ try/catch του Redux-Saga για να χειριστείτε αυτόματα τα σφάλματα. Αυτό μας επιτρέπει να διαχειριζόμαστε κεντρικά τις αποτυχίες και να παρέχουμε στους χρήστες ομοιόμορφα μηνύματα σφάλματος.
- Χρησιμοποιήστε ακυρώσιμα sagas για καλύτερη απόδοση. Όταν χρησιμοποιείτε ένα στοιχείο React, μπορεί να ενεργοποιήσει πολλές κλήσεις API. Καταστάσεις αγώνων και περιττές κλήσεις διεπαφής προγραμματισμού ενδέχεται να προκύψουν από αυτήν την ενεργοποίηση API. Ακυρώνοντας τυχόν τρέχουσες κλήσεις API όταν κάνετε ένα νέο αίτημα, μπορείτε να το αποτρέψετε.
- Χρησιμοποιήστε τα πιο πρόσφατα δεδομένα. Όταν κάνετε πολλά αιτήματα API για τα ίδια δεδομένα, είναι σημαντικό να διασφαλίσετε ότι χρησιμοποιούν τα πιο πρόσφατα δεδομένα. Χρησιμοποιώντας την αργότερο αποτέλεσμα, το Redux-Saga σας βοηθά να το πετύχετε. Το εφέ διασφαλίζει ότι χρησιμοποιείτε τις πιο πρόσφατες ή πιο πρόσφατες κλήσεις API και ακυρώνει τυχόν εκκρεμή αιτήματα API για τα ίδια δεδομένα.
- Χρησιμοποιήστε ένα ξεχωριστό αρχείο για ιστορίες. Θα πρέπει να κρατήσετε το Sagas χωριστά από το αρχείο καταστήματος Redux. Ως αποτέλεσμα, τα Sagas σας θα είναι πιο εύκολο να ελεγχθούν και να δοκιμαστούν.
Λήψη δεδομένων με το Redux-Saga
Το Redux-Saga προσφέρει μια αξιόπιστη και ευέλικτη μέθοδο για το χειρισμό ασύγχρονων εργασιών σε εφαρμογές React. Χρησιμοποιώντας το Sagas, μπορείτε να δημιουργήσετε πιο ισχυρό, ελεγχόμενο και ευέλικτο κώδικα που διαχωρίζει τις ανησυχίες.
Η ανάκτηση δεδομένων μπορεί να είναι μια δύσκολη και επιρρεπής σε σφάλματα λειτουργία, αλλά μπορείτε να την απλοποιήσετε με τη βοήθεια του Redux-Saga. Το Redux-Saga βελτιώνει την εμπειρία χρήστη, επιτρέποντάς σας να διαχειρίζεστε αξιόπιστα και προβλέψιμα πολλές ασύγχρονες διαδικασίες.
Λόγω των πολλών πλεονεκτημάτων και δυνατοτήτων του, το Redux-Saga είναι μια φανταστική προσθήκη στη συλλογή εργαλείων ανάπτυξης React.