Upptäck vad Sagas är och hur de kan hjälpa dig att skriva mer robust, flexibel kod.
React och Redux är populära webbutvecklingsverktyg för att hantera tillstånd och utveckla dynamiska användargränssnitt.
Att komma åt information kan vara svårt och tidskrävande, särskilt när man hanterar asynkrona händelser. Redux-Saga, ett lättanvänt mellanprogrampaket som hanterar asynkrona aktiviteter, kan förenkla denna process.
Lär dig hur React bygger en applikation som hämtar data från Redux-Saga.
Förstå Redux-Saga
Redux-Saga är ett mellanprogrampaket som gör det enklare att hantera och testa bieffekter som webbläsarlagringsåtkomst och asynkrona API-förfrågningar. Att använda generatorfunktioner gör att asynkron kod ser synkron ut, vilket gör det lättare att resonera om och felsöka.
Redux-Saga fungerar genom att leta efter specifika Redux-åtgärder och trigga Sagas, som är bieffektgeneratorfunktioner. Sagas kan köra asynkrona operationer, som att hämta data från ett API, och sedan skicka en ny Redux-åtgärd för att uppdatera tillståndet.
Ta exemplet med att använda Redux-Saga för att hantera asynkrona API-anrop. Börja med att skapa en Redux-åtgärd som initierar datainsamlingsproceduren:
exporterakonst FETCH_DATA = 'FETCH_DATA';
exporterakonst fetchData = (params) => ({
typ: FETCH_DATA,
nyttolast: params,
});
Åtgärdens nyttolast, FETCH_DATA, inkluderar alla väsentliga parametrar, som API-slutpunkten och förfrågningsparametrar.
Definiera sedan en Saga som lyssnar efter FETCH_DATA-aktiviteten och gör datainsamlingen:
importera { ring, lägg, ta Senaste } från'redux-saga/effekter';
importera axios från"axios";exporterafungera* fetchDataSaga(handling) {
Prova {
konst svar = avkastning call (axios.get, action.payload.endpoint, {
params: action.payload.params,
});avkastning sätta({ typ: 'FETCH_DATA_SUCCESS', nyttolast: response.data });
} fånga (fel) {
avkastning sätta({ typ: 'FETCH_DATA_ERROR', nyttolast: error });
}
}
exporterafungera* watchFetchData() {
avkastning takeLatest (FETCH_DATA, fetchDataSaga);
}
Denna Saga gör ett API-anrop till axios bibliotek med hjälp av ring upp effekt. Den skickar sedan hämtad data som en ny Redux-åtgärdsnyttolast med typen FETCH_DATA_SUCCESS. Om ett fel uppstår skickar den ut en ny Redux-åtgärd med felobjektet som nyttolast och en typ av FETCH_DATA_ERROR.
Slutligen måste du registrera Saga i Redux-butiken med hjälp av redux-saga-mellanvaran:
importera { applicationMiddleware, createStore } från'på nytt';
importera skapa SagaMiddleware från'redux-saga';
importera rootReducer från'./reducers';
konst sagaMiddleware = createSagaMiddleware();
konst store = createStore (rootReducer, applicationMiddleware (sagaMiddleware));
sagaMiddleware.run (watchFetchData);
Genom att registrera watchFetchData Saga med den nya instansmellanvaran skapar denna kod en annan redux-saga. Mellanvaran ställs in i Redux-butiken med hjälp av ApplyMiddleware.
Redux-Saga ger generellt sett ett starkt och mångsidigt tillvägagångssätt för att hantera asynkrona aktiviteter inom Reacts Redux applikationer. Du kan effektivisera datahämtning och generera enklare kod att testa, underhålla och uppdatera genom att använda Sagas för att kontrollera kodbuggar.
Vanliga datahämtningsproblem i React-applikationer
Det finns några svårigheter som utvecklare ofta hittar när de använder Reacts datahämtning. Här är några exempel:
- Hantera asynkrona åtgärder: Detta är information som tillhandahålls av ett programmeringsgränssnitt som håller reda på icke samtidiga operationer utan att störa användargränssnittet (UI). Att arbeta med flera API-förfrågningar eller data som är beroende av andra data kan göra det här svårt.
- Hantering av fel: API-anrop kan misslyckas, och det är viktigt att du hanterar dessa fel korrekt. Detta inkluderar att tillhandahålla felmeddelanden till användaren och tillåta dem att skicka in begäran på nytt.
- Uppdatera Redux-butiken: Du bör spara information som erhållits från ett API i Redux-butiken så att andra komponenter kan komma åt den. Det är avgörande att uppdatera butiken utan att störa eller korrumpera redan befintlig data.
Hur man använder Redux-Saga för datahämtning i React
Genom att använda Redux-Saga för datahämtning kan du separera logiken för att göra API-anrop och hantera svaret från dina React-komponenter. Som ett resultat kan du fokusera på att rendera data och reagera på användarinteraktioner medan Sagas hanterar asynkron datahämtning och felhantering.
Du måste registrera watchFetchData Saga med Redux-Saga mellanprogram för att använda Sagas i vår Redux-butik:
// src/store.js
importera { createStore, tillämpaMiddleware } från'på nytt';
importera skapa SagaMiddleware från'redux-saga';
importera rootReducer från'./reducers';
importera { watchFetchData } från'./sagas/dataSaga';konst sagaMiddleware = createSagaMiddleware();
konst store = createStore (rootReducer, applicationMiddleware (sagaMiddleware));
sagaMiddleware.run (watchFetchData);
exporterastandard Lagra;
Denna kod registrerar sagaMellanvara med Redux-butiken med hjälp av tillämpa mellanprogram funktion och skapa SagaMiddleware metod för redux-saga paket. Använd sedan springa metoden exekverar den watchFetchData Saga.
Din Redux-Saga-installation är klar nu när varje komponent är på plats. Sagan använder fetchDataApi funktion för att hämta data när din React-komponent skickar åtgärden FETCH_DATA_REQUEST. Om den schemalagda datahämtningen lyckas skickas en annan aktivitet med den hämtade datan. Om det finns ett fel skickar den en ny åtgärd med felobjektet.
// src/components/DataComponent.jsimportera Reagera, { useEffect } från'reagera';
importera { useDispatch, useSelector } från'reagera-redux';
importera { fetchDataRequest } från'../actions/dataActions';konst DataComponent = () => {
konst dispatch = useDispatch();
konst { data, isLoading, error } = useSelector((stat) => state.data);useEffect(() => {
dispatch (fetchDataRequest({ param1: 'värde1', param2: 'värde2' }));
}, [utskick]);om (laddar) {
lämna tillbaka<div>Läser in...div>;
}om (fel) {
lämna tillbaka<div>Fel: {error.message}div>;
}lämna tillbaka (
{data.map((Artikel) => ({item.name}</div>
))}
</div>
);
};
exporterastandard DataComponent;
I exemplet ovan använder du useSelector koppla in din React-komponent för att få data, laddar, och fel värden från Redux-butiken. Du skickar dessutom FETCH_DATA_REQUEST-åtgärden med hjälp av useEffect() krok när komponenten monteras. Du återger data, laddningsmeddelande eller felmeddelande beroende på data värden, laddar, och fel.
Genom att utnyttja Redux-Saga för datahämtning, hantera asynkrona API-förfrågningar i en React-applikation kan rationaliseras avsevärt. Du kan skapa mer underhållbar och modulär kod genom att isolera API-anropslogiken från dina komponenter och hantera det asynkrona flödet i Sagas.
Bästa metoder för att använda Redux-Saga för datahämtning
Följ dessa bästa metoder när du använder Redux-Saga för datahämtning:
- Använd distinkta sagor för varje datahämtningsoperation. Det är tillrådligt att separera en Saga för varje datahämtningsprocess istället för att inkludera all logik i en enda Saga. Att underhålla och ändra koden är enklare eftersom du omedelbart kan hitta relevanta sagor för vissa aktiviteter.
- Använd Redux-Sagas inbyggda felhantering. Du kan använda Redux-Sagas try/catch-block för att hantera fel automatiskt. Detta gör att vi kan hantera fel centralt och ge användarna enhetliga felmeddelanden.
- Använd avbrytbara sagor för bättre prestanda. När du använder en React-komponent kan den utlösa många API-anrop. Racesituationer och onödiga anrop till programmeringsgränssnittet kan bli resultatet av denna API-utlösare. Genom att avbryta alla pågående API-anrop när du gör en ny begäran kan du förhindra detta.
- Använd de senaste uppgifterna. När du gör flera API-förfrågningar för samma data är det avgörande att se till att de använder den senaste datan. Använda senast effekt, hjälper Redux-Saga dig att uppnå detta. Effekten säkerställer att du använder de senaste eller senaste API-anropen och avbryter alla väntande API-förfrågningar för samma data.
- Använd en separat fil för sagor. Du bör hålla Sagorna åtskilda från Redux-butiksfilen. Som ett resultat blir dina sagor lättare att kontrollera och testa.
Hämta data med Redux-Saga
Redux-Saga erbjuder en pålitlig och flexibel metod för att hantera asynkrona uppgifter i React-applikationer. Med hjälp av Sagas kan du skapa mer robust, testbar och flexibel kod som separerar problem.
Datahämtning kan vara en svår och felbenägen operation, men du kan göra det enklare med hjälp av Redux-Saga. Redux-Saga förbättrar användarupplevelsen genom att låta dig hantera många asynkrona processer på ett tillförlitligt och förutsägbart sätt.
På grund av dess många fördelar och funktioner är Redux-Saga ett fantastiskt tillägg till din samling av React-utvecklingsverktyg.