Sådan hentes data med Redux-Saga i en React-applikation

React og Redux er populære webudviklingsværktøjer til styring af tilstand og udvikling af dynamiske brugergrænseflader.

Adgang til information kan være vanskelig og tidskrævende, især når man håndterer asynkrone hændelser. Redux-Saga, en nem at bruge middleware-pakke, der styrer asynkrone aktiviteter, kan forenkle denne proces.

Lær, hvordan React for at bygge en applikation, der henter data fra Redux-Saga.

Forstå Redux-Saga

Redux-Saga er en middleware-pakke, der gør det nemmere at administrere og teste bivirkninger som browserlageradgang og asynkrone API-anmodninger. Brug af generatorfunktioner får asynkron kode til at fremstå synkron, hvilket gør det lettere at ræsonnere om og fejlfinde.

Redux-Saga virker ved at lede efter specifikke Redux-handlinger og udløse sagaer, som er bivirkningsgeneratorfunktioner. Sagas kan køre asynkrone operationer, såsom at hente data fra en API, og derefter sende en ny Redux-handling for at opdatere tilstanden.

Tag eksemplet med at bruge Redux-Saga til at administrere asynkrone API-kald. Start med at oprette en Redux-handling, der starter dataindsamlingsproceduren:

eksportkonst FETCH_DATA = 'FETCH_DATA';
eksportkonst henteData = (params) => ({
 type: FETCH_DATA,
 nyttelast: params,
});

Handlingens nyttelast, FETCH_DATA, inkluderer alle væsentlige parametre, såsom API-endepunktet og anmodningsparametrene.

Derefter skal du definere en saga, der lytter efter FETCH_DATA-aktiviteten og foretager dataindsamlingen:

importere { ring, læg, tag Seneste } fra'redux-saga/effekter';
importere axios fra'aksios';
eksportfungere* henteDataSaga(handling) {
prøve {
konst svar = udbytte call (axios.get, action.payload.endpoint, {
 params: action.payload.params,
 });
udbytte sætte({ type: 'FETCH_DATA_SUCCESS', nyttelast: response.data });
 } fangst (fejl) {
udbytte sætte({ type: 'FETCH_DATA_ERROR', nyttelast: fejl });
 }
}
eksportfungere* watchFetchData() {
udbytte takeLatest (FETCH_DATA, fetchDataSaga);
}

Denne saga foretager et API-kald til axios bibliotek ved hjælp af opkald effekt. Den sender derefter de hentede data som en ny Redux-handlingsnyttelast med typen FETCH_DATA_SUCCESS. Hvis der opstår en fejl, udsender den en ny Redux-handling med fejlobjektet som nyttelast og en type FETCH_DATA_ERROR.

Til sidst skal du registrere Sagaen i Redux-butikken ved hjælp af redux-saga-middlewaren:

importere { applyMiddleware, createStore } fra'redux';
importere skabe SagaMiddleware fra'redux-saga';
importere rootReducer fra'./reducere';
konst sagaMiddleware = createSagaMiddleware();
konst store = createStore (rootReducer, applicationMiddleware (sagaMiddleware));
sagaMiddleware.run (watchFetchData);

Ved at registrere watchFetchData Saga med den nye instans-middleware, denne kode skaber en anden redux-saga. Mellemwaren er sat op i Redux-butikken vha Anvend Middleware.

Redux-Saga giver generelt en stærk og alsidig tilgang til styring af asynkrone aktiviteter indenfor Reacts Redux applikationer. Du kan strømline datahentning og generere nemmere kode at teste, vedligeholde og opdatere ved at bruge Sagas til at kontrollere kodefejl.

Almindelige problemer med datahentning i React-applikationer

Der er et par vanskeligheder, som udviklere ofte finder, mens de bruger Reacts datahentning. Her er et par eksempler:

1. Håndtering af asynkrone handlinger: Dette er information leveret af en programmeringsgrænseflade, der holder styr på ikke-samtidige operationer uden at forstyrre brugergrænsefladen (UI). At arbejde med flere API-anmodninger eller data, der er afhængige af andre data, kan gøre dette svært.
2. Håndtering af fejl: API-kald kan mislykkes, og det er vigtigt, at du håndterer disse fejl korrekt. Dette inkluderer at give brugeren fejlmeddelelser og give dem mulighed for at genindsende anmodningen.
3. Opdatering af Redux-lageret: Du bør gemme oplysninger erhvervet fra en API i Redux-lageret, så andre komponenter kan få adgang til det. Det er afgørende at opdatere butikken uden at forstyrre eller ødelægge allerede eksisterende data.

Sådan bruges Redux-Saga til datahentning i React

Brug af Redux-Saga til datahentning giver dig mulighed for at adskille logikken for at foretage API-kald og håndtere svaret fra dine React-komponenter. Som et resultat kan du fokusere på at gengive dataene og reagere på brugerinteraktioner, mens sagaerne håndterer asynkron datahentning og fejlhåndtering.

Du skal registrere watchFetchData Saga med Redux-Saga middleware til at bruge sagaerne i vores Redux-butik:

// src/store.js
importere { createStore, applyMiddleware } fra'redux';
importere skabe SagaMiddleware fra'redux-saga';
importere rootReducer fra'./reducere';
importere { watchFetchData } fra'./sagas/dataSaga';
konst sagaMiddleware = createSagaMiddleware();
konst store = createStore (rootReducer, applicationMiddleware (sagaMiddleware));
sagaMiddleware.run (watchFetchData);
eksportStandard butik;

Denne kode registrerer sagaMiddleware med Redux-butikken ved hjælp af anvende Middleware funktion og skabe SagaMiddleware metoden til redux-saga pakke. Brug derefter løb metode, udfører den watchFetchData Saga.

Din Redux-Saga-opsætning er færdig nu, hvor hver komponent er på plads. Sagaen bruger henteDataApi funktion til at hente dataene, når din React-komponent sender handlingen FETCH_DATA_REQUEST. Hvis den planlagte datahentning lykkes, sender den en anden aktivitet med de hentede data. Hvis der er en fejl, sender den en ny handling med fejlobjektet.

// src/components/DataComponent.js
importere Reager, { useEffect } fra'reagere';
importere { useDispatch, useSelector } fra'react-redux';
importere { fetchDataRequest } fra'../actions/dataActions';
konst DataComponent = () => {
konst dispatch = useDispatch();
konst { data, isLoading, error } = useSelector((stat) => state.data);
 useEffect(() => {
 afsendelse (fetchDataRequest({ param1: 'værdi1', param2: 'værdi2' }));
 }, [afsendelse]);
hvis (isLoading) {
Vend tilbage<div>Indlæser...div>;
 }
hvis (fejl) {
Vend tilbage<div>Fejl: {error.message}div>;
 }
Vend tilbage (



 {data.map((vare) => (
{item.name}</div>
 ))}
 </div>
 );
};
eksportStandard DataComponent;

I eksemplet ovenfor bruger du useSelector tilslutte din React-komponent for at få dataene, er Indlæser, og fejl værdier fra Redux-butikken. Du sender desuden FETCH_DATA_REQUEST-handlingen ved hjælp af useEffect() hook når komponenten monteres. Du gengiver dataene, indlæsningsmeddelelsen eller fejlmeddelelsen afhængigt af data værdier, er Indlæser, og fejl.

Ved at udnytte Redux-Saga til datahentning, håndtering af asynkrone API-anmodninger i en React-applikation kan være væsentligt strømlinet. Du kan skabe mere vedligeholdelsesvenlig og modulær kode ved at isolere API-opkaldslogikken fra dine komponenter og administrere det asynkrone flow i Sagas.

Bedste praksis for brug af Redux-Saga til datahentning

Følg disse bedste fremgangsmåder, mens du bruger Redux-Saga til datahentning:

1. Brug særskilte sagaer til hver datahentningsoperation. Det er tilrådeligt at adskille en Saga for hver datahentningsproces i stedet for at inkludere al logikken i en enkelt Saga. Vedligeholdelse og ændring af koden er nemmere, da du straks kan finde de relevante sagaer til bestemte aktiviteter.
2. Brug Redux-Sagas indbyggede fejlhåndtering. Du kan bruge Redux-Sagas try/catch-blok til at håndtere fejl automatisk. Dette giver os mulighed for at håndtere fejl centralt og give brugerne ensartede fejlmeddelelser.
3. Brug annullerbare sagaer for bedre ydeevne. Når du bruger en React-komponent, kan den udløse mange API-kald. Race situationer og unødvendige programmeringsgrænsefladekald kan være resultatet af denne API-trigger. Ved at annullere eventuelle igangværende API-kald, når du foretager en ny anmodning, kan du forhindre dette.
4. Brug de nyeste data. Når du laver flere API-anmodninger om de samme data, er det afgørende at sikre, at de bruger de nyeste data. Bruger seneste effekt, hjælper Redux-Saga dig med at opnå dette. Effekten sikrer, at du bruger de seneste eller seneste API-kald og annullerer eventuelle afventende API-anmodninger for de samme data.
5. Brug en separat fil til sagaer. Du bør holde sagaerne adskilt fra Redux-butiksfilen. Som et resultat bliver dine sagaer nemmere at kontrollere og teste.

Hent data med Redux-Saga

Redux-Saga tilbyder en pålidelig og fleksibel metode til håndtering af asynkrone opgaver i React-applikationer. Ved at bruge Sagas kan du oprette mere robust, testbar og fleksibel kode, der adskiller bekymringer.

Datahentning kan være en vanskelig og fejlbehæftet operation, men du kan gøre det enklere ved hjælp af Redux-Saga. Redux-Saga forbedrer brugeroplevelsen ved at give dig mulighed for pålideligt og forudsigeligt at administrere mange asynkrone processer.

På grund af dets mange fordele og funktioner er Redux-Saga en fantastisk tilføjelse til din samling af React-udviklingsværktøjer.