Oppdag hva Sagas er og hvordan de kan hjelpe deg med å skrive mer robust, fleksibel kode.
React og Redux er populære webutviklingsverktøy for å administrere tilstand og utvikle dynamiske brukergrensesnitt.
Å få tilgang til informasjon kan være vanskelig og tidkrevende, spesielt når det gjelder asynkrone hendelser. Redux-Saga, en brukervennlig mellomvarepakke som håndterer asynkrone aktiviteter, kan forenkle denne prosessen.
Lær hvordan React for å bygge en applikasjon som henter data fra Redux-Saga.
Forstå Redux-Saga
Redux-Saga er en mellomvarepakke som gjør det enklere å administrere og teste bivirkninger som nettleserlagringstilgang og asynkrone API-forespørsler. Ved å bruke generatorfunksjoner får asynkron kode til å virke synkron, noe som gjør det lettere å resonnere og feilsøke.
Redux-Saga fungerer ved å se etter spesifikke Redux-handlinger og utløse Sagaer, som er bivirkningsgeneratorfunksjoner. Sagas kan kjøre asynkrone operasjoner, for eksempel innhenting av data fra et API, og deretter sende en ny Redux-handling for å oppdatere tilstanden.
Ta eksemplet med å bruke Redux-Saga til å administrere asynkrone API-anrop. Start med å lage en Redux-handling som starter datainnsamlingsprosedyren:
eksportkonst FETCH_DATA = 'FETCH_DATA';
eksportkonst henteData = (params) => ({
type: FETCH_DATA,
nyttelast: params,
});
Handlingens nyttelast, FETCH_DATA, inkluderer alle viktige parametere, som API-endepunkt og forespørselsparametere.
Definer deretter en saga som lytter etter FETCH_DATA-aktiviteten og utfører datainnsamlingen:
import { call, put, takeLatest } fra'redux-saga/effekter';
import aksioer fra'aksios';eksportfunksjon* henteDataSaga(handling) {
prøve {
konst svar = utbytte kall (axios.get, action.payload.endpoint, {
params: action.payload.params,
});utbytte sette({ type: 'FETCH_DATA_SUCCESS', nyttelast: response.data });
} å fange (feil) {
utbytte sette({ type: 'FETCH_DATA_ERROR', nyttelast: feil });
}
}
eksportfunksjon* watchFetchData() {
utbytte takeLatest (FETCH_DATA, fetchDataSaga);
}
Denne sagaen foretar et API-kall til aksioer bibliotek ved hjelp av anrop effekt. Den sender deretter de hentede dataene som en ny Redux-handlingsnyttelast med typen FETCH_DATA_SUCCESS. Hvis det oppstår en feil, sender den ut en ny Redux-handling med feilobjektet som nyttelast og en type FETCH_DATA_ERROR.
Til slutt må du registrere Saga hos Redux-butikken ved å bruke redux-saga-mellomvaren:
import { applicationMiddleware, createStore } fra'redux';
import lage SagaMiddleware fra'redux-saga';
import rootReducer fra'./redusere';
konst sagaMiddleware = createSagaMiddleware();
konst store = createStore (rootReducer, applicationMiddleware (sagaMiddleware));
sagaMiddleware.run (watchFetchData);
Ved å registrere watchFetchData Saga med den nye forekomsten mellomvare, denne koden skaper en annen redux-saga. Mellomvaren er satt opp på Redux-butikken ved hjelp av Bruk mellomvare.
Redux-Saga gir generelt en sterk og allsidig tilnærming for å håndtere asynkrone aktiviteter innenfor Reacts Redux applikasjoner. Du kan strømlinjeforme datahenting og generere enklere kode å teste, vedlikeholde og oppdatere ved å bruke Sagas til å kontrollere kodefeil.
Vanlige problemer med datahenting i React-applikasjoner
Det er noen problemer som utviklere ofte finner når de bruker Reacts datahenting. Her er noen eksempler:
- Håndtere asynkrone handlinger: Dette er informasjon levert av et programmeringsgrensesnitt som holder styr på ikke-samtidige operasjoner uten å forstyrre brukergrensesnittet (UI). Å jobbe med flere API-forespørsler eller data som er avhengige av andre data kan gjøre dette vanskelig.
- Håndtering av feil: API-kall kan mislykkes, og det er viktig at du håndterer disse feilene riktig. Dette inkluderer å gi feilmeldinger til brukeren og la dem sende inn forespørselen på nytt.
- Oppdatering av Redux-butikken: Du bør lagre informasjon hentet fra en API i Redux-butikken slik at andre komponenter kan få tilgang til den. Det er avgjørende å oppdatere butikken uten å forstyrre eller ødelegge allerede eksisterende data.
Slik bruker du Redux-Saga for datahenting i React
Ved å bruke Redux-Saga for datahenting kan du skille logikken for å foreta API-anrop og håndtere responsen fra React-komponentene dine. Som et resultat kan du fokusere på å gjengi dataene og reagere på brukerinteraksjoner mens Sagas håndterer asynkron datainnhenting og feilhåndtering.
Du må registrere watchFetchData Saga med Redux-Saga mellomvare for å bruke Sagas i Redux-butikken vår:
// src/store.js
import { createStore, applyMiddleware } fra'redux';
import lage SagaMiddleware fra'redux-saga';
import rootReducer fra'./redusere';
import { watchFetchData } fra'./sagas/dataSaga';konst sagaMiddleware = createSagaMiddleware();
konst store = createStore (rootReducer, applicationMiddleware (sagaMiddleware));
sagaMiddleware.run (watchFetchData);
eksportmisligholde butikk;
Denne koden registrerer sagaMiddelvare med Redux-butikken ved å bruke bruke mellomvare funksjon og lage SagaMiddleware metoden for redux-saga pakke. Deretter bruker du løpe metoden, utfører den watchFetchData Saga.
Redux-Saga-oppsettet ditt er fullført nå som hver komponent er på plass. Sagaen bruker henteDataApi funksjon for å hente dataene når React-komponenten sender handlingen FETCH_DATA_REQUEST. Hvis den planlagte datahentingen er vellykket, sender den en annen aktivitet med de hentede dataene. Hvis det er en feil, sender den en ny handling med feilobjektet.
// src/components/DataComponent.jsimport Reager, { useEffect } fra'reagere';
import { useDispatch, useSelector } fra'react-redux';
import { fetchDataRequest } fra'../actions/dataActions';konst DataComponent = () => {
konst dispatch = useDispatch();
konst { data, isLoading, error } = useSelector((stat) => state.data);useEffect(() => {
utsendelse (fetchDataRequest({ param1: 'verdi1', param2: 'verdi2' }));
}, [utsendelse]);hvis (laster) {
komme tilbake<div>Laster inn...div>;
}hvis (feil) {
komme tilbake<div>Feil: {error.message}div>;
}komme tilbake (
{data.map((punkt) => ({item.name}</div>
))}
</div>
);
};
eksportmisligholde DataComponent;
I eksemplet ovenfor bruker du useSelector koble inn React-komponenten din for å få dataene, er Laster, og feil verdier fra Redux-butikken. Du sender i tillegg FETCH_DATA_REQUEST-handlingen ved å bruke useEffect() krok når komponenten monteres. Du gjengir dataene, lastemeldingen eller feilmeldingen avhengig av data verdier, er Laster, og feil.
Ved å utnytte Redux-Saga for datahenting, administrere asynkrone API-forespørsler i en React-applikasjon kan bli betydelig effektivisert. Du kan lage mer vedlikeholdbar og modulær kode ved å isolere API-anropslogikken fra komponentene dine og administrere den asynkrone flyten i Sagas.
Beste praksis for bruk av Redux-Saga for datahenting
Følg disse beste fremgangsmåtene mens du bruker Redux-Saga for datahenting:
- Bruk forskjellige sagaer for hver datahentingsoperasjon. Det er tilrådelig å skille en Saga for hver datahentingsprosess i stedet for å inkludere all logikken i en enkelt Saga. Å vedlikeholde og endre koden er enklere siden du umiddelbart kan finne de relevante sagaene for visse aktiviteter.
- Bruk Redux-Sagas innebygde feilhåndtering. Du kan bruke Redux-Sagas try/catch-blokk for å håndtere feil automatisk. Dette gjør at vi kan håndtere feil sentralt og gi brukerne enhetlige feilmeldinger.
- Bruk kansellerbare sagaer for bedre ytelse. Når du bruker en React-komponent, kan den utløse mange API-kall. Løpssituasjoner og unødvendige kall til programmeringsgrensesnitt kan oppstå fra denne API-utløseren. Ved å avbryte eventuelle pågående API-kall når du gjør en ny forespørsel, kan du forhindre dette.
- Bruk de nyeste dataene. Når du foretar flere API-forespørsler for samme data, er det avgjørende å sikre at de bruker de nyeste dataene. Bruker siste effekt, hjelper Redux-Saga deg å oppnå dette. Effekten sikrer at du bruker de siste eller nyeste API-kallene og kansellerer eventuelle ventende API-forespørsler for de samme dataene.
- Bruk en egen fil for sagaer. Du bør holde sagaene atskilt fra Redux-butikkfilen. Som et resultat vil dine sagaer være lettere å kontrollere og teste.
Hent data med Redux-Saga
Redux-Saga tilbyr en pålitelig og fleksibel metode for å håndtere asynkrone oppgaver i React-applikasjoner. Ved å bruke Sagas kan du lage mer robust, testbar og fleksibel kode som skiller bekymringer.
Datahenting kan være en vanskelig og feilutsatt operasjon, men du kan gjøre det enklere ved hjelp av Redux-Saga. Redux-Saga forbedrer brukeropplevelsen ved å la deg administrere mange asynkrone prosesser pålitelig og forutsigbart.
På grunn av sine mange fordeler og funksjoner, er Redux-Saga et fantastisk tillegg til samlingen av React-utviklingsverktøy.
