Gegevens ophalen met Redux-Saga in een React-toepassing

Ontdek wat Saga's zijn en hoe ze u kunnen helpen robuustere, flexibelere code te schrijven.

React en Redux zijn populaire webontwikkelingstools voor het beheren van status en het ontwikkelen van dynamische gebruikersinterfaces.

Toegang tot informatie kan moeilijk en tijdrovend zijn, vooral bij asynchrone gebeurtenissen. Redux-Saga, een gebruiksvriendelijk middlewarepakket dat asynchrone activiteiten beheert, kan dit proces vereenvoudigen.

Leer hoe React een applicatie bouwt die gegevens ophaalt uit Redux-Saga.

Redux-Saga begrijpen

Redux-Saga is een middlewarepakket dat het eenvoudiger maakt om neveneffecten zoals browseropslagtoegang en asynchrone API-verzoeken te beheren en te testen. Door generatorfuncties te gebruiken, lijkt asynchrone code synchroon, waardoor het gemakkelijker wordt om erover te redeneren en fouten op te sporen.

Redux-Saga werkt door te zoeken naar specifieke Redux-acties en Saga's te activeren, dit zijn neveneffectgeneratorfuncties. Sagas kan asynchrone bewerkingen uitvoeren, zoals het verkrijgen van gegevens van een API, en vervolgens een nieuwe Redux-actie verzenden om de status bij te werken.

instagram viewer

Neem het voorbeeld van het gebruik van Redux-Saga om asynchrone API-aanroepen te beheren. Begin met het maken van een Redux-actie die de procedure voor het verzamelen van gegevens initieert:

exporterenconst FETCH_DATA = 'FETCH_DATA';exporterenconst gegevens ophalen = (parameters) => ({
 type: FETCH_DATA,
 laadvermogen: parameters,
});

De payload van de actie, FETCH_DATA, bevat alle essentiële parameters, zoals het API-eindpunt en verzoekparameters.

Definieer vervolgens een Saga die luistert naar de FETCH_DATA-activiteit en de gegevensverzameling uitvoert:

importeren { call, put, takeLatest } van'redux-saga/effecten';
importeren axioma's van'axios';exporterenfunctie* fetchDataSaga(actie) {
poging {
const reactie = opbrengst bel (axios.get, action.payload.endpoint, {
 params: actie.payload.params,
 });
opbrengst neerzetten({ type: 'FETCH_DATA_SUCCESS', lading: respons.data });
 } vangst (fout) {
opbrengst neerzetten({ type: 'FETCH_DATA_ERROR', lading: fout });
 }
}exporterenfunctie* bekijkFetchData() {
opbrengst takeLatest (FETCH_DATA, fetchDataSaga);
}

Deze Saga doet een API-aanroep naar het axioma's bibliotheek met behulp van de telefoongesprek effect. Vervolgens worden de opgehaalde gegevens verzonden als een nieuwe Redux-actiepayload met het type FETCH_DATA_SUCCESS. Als er een fout optreedt, wordt er een nieuwe Redux-actie verzonden met het foutobject als payload en een type FETCH_DATA_ERROR.

Ten slotte moet u de Saga registreren bij de Redux-winkel met behulp van de redux-saga-middleware:

importeren { toepassenMiddleware, createStore } van'redux';
importeren createSagaMiddleware van'redux-sage';
importeren rootReducer van'./verloopstukken';const sagaMiddleware = createSagaMiddleware();
const store = createStore (rootReducer, applyMiddleware (sagaMiddleware));
sagaMiddleware.run (watchFetchData);

Door het registreren van de bekijkFetchData Saga met de nieuwe instantie-middleware, deze code creëert een andere redux-verhaal. De middleware wordt ingesteld in de Redux-winkel met behulp van Middleware toepassen.

Redux-Saga biedt over het algemeen een sterke en veelzijdige benadering voor het beheer van asynchrone activiteiten binnen Redux van React toepassingen. U kunt het ophalen van gegevens stroomlijnen en gemakkelijker code genereren om te testen, te onderhouden en bij te werken door Sagas te gebruiken om codefouten te beheersen.

Algemene problemen met het ophalen van gegevens in React-applicaties

Er zijn een paar problemen die ontwikkelaars vaak tegenkomen bij het gebruik van React's gegevens ophalen. Hier zijn een paar voorbeelden:

Asynchrone acties beheren: dit is informatie die wordt geleverd door een programmeerinterface die niet-gelijktijdige bewerkingen bijhoudt zonder de gebruikersinterface (UI) te verstoren. Werken met verschillende API-verzoeken of gegevens die afhankelijk zijn van andere gegevens, kan dit moeilijk maken.
Afhandelen van fouten: API-aanroepen kunnen mislukken en het is van vitaal belang dat u deze fouten correct afhandelt. Dit omvat het verstrekken van foutmeldingen aan de gebruiker en hen toestaan het verzoek opnieuw in te dienen.
De Redux-winkel bijwerken: u moet informatie die u via een API hebt verkregen, opslaan in de Redux-winkel, zodat andere componenten er toegang toe hebben. Het is van cruciaal belang om de winkel bij te werken zonder bestaande gegevens te verstoren of te beschadigen.

Hoe Redux-Saga te gebruiken voor het ophalen van gegevens in React

Door Redux-Saga te gebruiken voor het ophalen van gegevens, kunt u de logica scheiden voor het maken van API-aanroepen en het afhandelen van de reactie van uw React-componenten. Als gevolg hiervan kunt u zich concentreren op het weergeven van de gegevens en reageren op gebruikersinteracties, terwijl de Saga's het asynchrone ophalen van gegevens en foutbeheer afhandelen.

U moet de bekijkFetchData Saga met de Redux-Sage middleware om de Sagas in onze Redux-winkel te gebruiken:

// src/store.js
importeren { createStore, pas Middleware toe } van'redux';
importeren createSagaMiddleware van'redux-sage';
importeren rootReducer van'./verloopstukken';
importeren { watchFetchData } van'./saga's/dataSaga';const sagaMiddleware = createSagaMiddleware();
const store = createStore (rootReducer, applyMiddleware (sagaMiddleware));
sagaMiddleware.run (watchFetchData);exporterenstandaard winkel;

Deze code registreert de sagaMiddleware met de Redux-winkel met behulp van de middleware toepassen functie en de createSagaMiddleware methode van de redux-verhaal pakket. Gebruik dan de loop methode, voert het de bekijkFetchData Saga.

Uw Redux-Saga-installatie is voltooid nu elk onderdeel op zijn plaats zit. De Saga gebruikt de fetchDataApi functie om de gegevens op te halen wanneer uw React-component de actie FETCH_DATA_REQUEST verzendt. Als het geplande ophalen van gegevens is gelukt, wordt er een andere activiteit verzonden met de opgehaalde gegevens. Als er een fout is, stuurt het een nieuwe actie met het foutobject.

// src/components/DataComponent.jsimporteren Reageer, { useEffect } van'Reageer';
importeren { useDispatch, useSelector } van'reageer-redux';
importeren { fetchDataRequest } van'../acties/gegevensActies';
const Gegevenscomponent = () => {
const verzending = useDispatch();
const { data, isLoading, error } = useSelector((staat) => staat.gegevens);
 gebruikEffect(() => {
 verzending (fetchDataRequest({ param1: 'waarde1', param2: 'waarde2' }));
 }, [verzenden]);
als (Laadt) {
opbrengst<div>Bezig met laden...div>;
 }
als (fout) {
opbrengst<div>Fout: {error.message}div>;
 }
opbrengst (



 {data.map((item) => (
{item.naam}</div>
 ))}
 </div>
 );
};
exporterenstandaard Gegevenscomponent;

In bovenstaand voorbeeld gebruik je de gebruikSelector sluit uw React-component aan om de gegevens te krijgen, Laadt, En fout waarden uit de Redux-winkel. U verzendt bovendien de actie FETCH_DATA_REQUEST met behulp van de gebruikEffect() haak wanneer het onderdeel wordt gemonteerd. U geeft de gegevens, het laadbericht of het foutbericht weer, afhankelijk van de gegevens waarden, Laadt, En fout.

Door gebruik te maken van Redux-Saga voor het ophalen van gegevens, beheer van asynchrone API-verzoeken in een React-toepassing kan aanzienlijk worden gestroomlijnd. U kunt meer onderhoudbare en modulaire code maken door de API-aanroeplogica te isoleren van uw componenten en de asynchrone stroom in Sagas te beheren.

Best practices voor het gebruik van Redux-Saga voor het ophalen van gegevens

Volg deze best practices bij het gebruik van Redux-Saga voor het ophalen van gegevens:

Gebruik verschillende sagen voor elke bewerking voor het ophalen van gegevens. Het is raadzaam om voor elk gegevensophaalproces een Saga te scheiden in plaats van alle logica in één Saga op te nemen. Het onderhouden en wijzigen van de code is eenvoudiger omdat u voor bepaalde activiteiten direct de relevante Saga's kunt vinden.
Gebruik de ingebouwde foutafhandeling van Redux-Saga. U kunt het try/catch-blok van Redux-Saga gebruiken om fouten automatisch af te handelen. Hierdoor kunnen we storingen centraal beheren en gebruikers voorzien van uniforme foutmeldingen.
Gebruik annuleerbare sagen voor betere prestaties. Wanneer u een React-component gebruikt, kan deze veel API-aanroepen activeren. Racesituaties en onnodige oproepen van de programmeerinterface kunnen het gevolg zijn van deze API-trigger. Door eventuele lopende API-aanroepen te annuleren wanneer u een nieuw verzoek doet, kunt u dit voorkomen.
Gebruik de meest actuele gegevens. Bij het doen van meerdere API-verzoeken voor dezelfde gegevens, is het cruciaal om ervoor te zorgen dat ze de meest recente gegevens gebruiken. De... gebruiken laatste effect, Redux-Saga helpt u dit te bereiken. Het effect zorgt ervoor dat u de nieuwste of meest recente API-aanroepen gebruikt en annuleert alle openstaande API-verzoeken voor dezelfde gegevens.
Gebruik een apart bestand voor sagen. U moet de sagen gescheiden houden van het Redux-winkelbestand. Als gevolg hiervan zullen uw Saga's gemakkelijker te controleren en te testen zijn.