Adatok lekérése a Redux-Saga segítségével egy React alkalmazásban

Fedezze fel, mik azok a Saga-k, és hogyan segíthetnek robusztusabb, rugalmasabb kód írásában.

A React és a Redux népszerű webfejlesztő eszközök állapotkezelésre és dinamikus felhasználói felületek fejlesztésére.

Az információhoz való hozzáférés nehéz és időigényes lehet, különösen, ha aszinkron eseményekkel foglalkozunk. A Redux-Saga, egy könnyen használható köztes szoftvercsomag, amely az aszinkron tevékenységeket kezeli, leegyszerűsítheti ezt a folyamatot.

Ismerje meg, hogyan hozhat létre React alkalmazást, amely adatokat kér le a Redux-Saga-ból.

A Redux-Saga megértése

A Redux-Saga egy köztesszoftver-csomag, amely egyszerűbbé teszi a mellékhatások kezelését és tesztelését, például a böngésző tárhely-hozzáférését és az aszinkron API-kéréseket. A generátor függvények használatával az aszinkron kód szinkronnak tűnik, ami megkönnyíti az érvelést és a hibakeresést.

A Redux-Saga úgy működik, hogy konkrét Redux-műveleteket keres, és Saga-kat indít el, amelyek mellékhatás-generáló funkciók. A Sagas aszinkron műveleteket futtathat, például adatokat gyűjthet egy API-ból, majd egy új Redux-műveletet küldhet az állapot frissítéséhez.

instagram viewer

Vegyük például a Redux-Saga használatát az aszinkron API-hívások kezelésére. Kezdje egy Redux művelet létrehozásával, amely elindítja az adatgyűjtési eljárást:

exportconst FETCH_DATA = "FETCH_DATA";exportconst fetchData = (params) => ({
 típus: FETCH_DATA,
 terhelhetőség: param,
});

A művelet hasznos terhelése (FETCH_DATA) tartalmaz minden alapvető paramétert, például az API-végpontot és a kérelem paramétereit.

Ezután definiáljon egy Saga-t, amely figyeli a FETCH_DATA tevékenységet, és elvégzi az adatgyűjtést:

import { call, put, take Latest } tól től"redux-saga/effektek";
import axiók tól től"axiók";exportfunkció* fetchDataSaga(akció) {
próbáld ki {
const válasz = hozam call (axios.get, action.payload.endpoint, {
 params: action.payload.params,
 });
hozam put({ típus: „FETCH_DATA_SUCCESS”, hasznos teher: válasz.adatok });
 } fogás (hiba) {
hozam put({ típus: "FETCH_DATA_ERROR", hasznos teher: hiba });
 }
}exportfunkció* WatchFetchData() {
hozam takeLatest (FETCH_DATA, fetchDataSaga);
}

Ez a Saga API-hívást indít a axiók könyvtár segítségével hívás hatás. Ezután a lekért adatokat egy új Redux-művelet hasznos adatként küldi el FETCH_DATA_SUCCESS típussal. Ha hiba történik, akkor egy új Redux-műveletet küld ki a hibaobjektummal a hasznos adattal és a FETCH_DATA_ERROR típussal.

Végül regisztrálnia kell a Saga-t a Redux áruházban a redux-saga köztes szoftverrel:

import { applicationMiddleware, createStore } tól től"redux";
import CreateSagaMiddleware tól től"redux-saga";
import rootReducer tól től"./reduktorok";const sagaMiddleware = CreateSagaMiddleware();
const store = createStore (rootReducer, applyMiddleware (sagaMiddleware));
sagaMiddleware.run (watchFetchData);

Regisztrációval a WatchFetchData Saga az új példány köztes szoftverrel, ez a kód létrehoz egy másikat redux-saga. A köztes szoftver a Redux áruházban van beállítva ApplyMiddleware.

A Redux-Saga általában erős és sokoldalú megközelítést biztosít az aszinkron tevékenységek kezeléséhez React Redux alkalmazások. Egyszerűsítheti az adatlekérést, és könnyebben generálhat kódot a teszteléshez, karbantartáshoz és frissítéshez a Sagas segítségével a kódhibák szabályozására.

Gyakori adatlekérési problémák a React alkalmazásokban

A React adatlekérése során a fejlesztők gyakran találkoznak néhány nehézséggel. Íme néhány példa:

Aszinkron műveletek kezelése: Ez egy olyan programozási felület által biztosított információ, amely a felhasználói felület (UI) beavatkozása nélkül nyomon követi a nem egyidejű műveleteket. Ezt megnehezítheti, ha több API-kéréssel vagy más adatokra támaszkodó adattal dolgozik.
Hibák kezelése: Az API-hívások meghiúsulhatnak, és létfontosságú, hogy ezeket a hibákat megfelelően kezelje. Ez magában foglalja a hibaüzenetek küldését a felhasználónak, és lehetővé teszi számukra a kérés újbóli benyújtását.
A Redux tároló frissítése: Az API-ból szerzett információkat el kell mentenie a Redux tárolóba, hogy más összetevők hozzáférhessenek. Kulcsfontosságú az áruház frissítése a már meglévő adatok megzavarása vagy megsértése nélkül.

A Redux-Saga használata adatlekéréshez a React alkalmazásban

A Redux-Saga adatlekérésre való használata lehetővé teszi az API-hívások lebonyolításának logikáját és a válaszok kezelését a React összetevőktől. Ennek eredményeként Ön az adatok megjelenítésére és a felhasználói interakciókra való reagálásra összpontosíthat, miközben a Sagas kezeli az aszinkron adatlekérést és a hibakezelést.

Regisztrálnia kell a WatchFetchData Saga a Redux-Saga köztes szoftver a Sagas használatához Redux áruházunkban:

// src/store.js
import { CreateStore, applyMiddleware } tól től"redux";
import CreateSagaMiddleware tól től"redux-saga";
import rootReducer tól től"./reduktorok";
import { watchFetchData } tól től'./sagas/dataSaga';const sagaMiddleware = CreateSagaMiddleware();
const store = createStore (rootReducer, applyMiddleware (sagaMiddleware));
sagaMiddleware.run (watchFetchData);exportalapértelmezett bolt;

Ez a kód regisztrálja a sagaMiddleware a Redux áruházzal a alkalmazniKözépprogramot funkció és a CreateSagaMiddleware módszere a redux-saga csomag. Ezután a fuss módszerrel végrehajtja a WatchFetchData Saga.

A Redux-Saga beállítása befejeződött, most, hogy minden összetevő a helyére került. A Saga a fetchDataApi függvény lekéri az adatokat, amikor a React összetevő elküldi a FETCH_DATA_REQUEST műveletet. Ha az ütemezett adatlekérés sikeres, egy másik tevékenységet küld a lekért adatokkal. Ha hiba történik, akkor új műveletet küld a hibaobjektummal.

// src/components/DataComponent.jsimport React, { useEffect } tól től'reagál';
import { useDispatch, useSelector } tól től'react-redux';
import { fetchDataRequest } tól től"../actions/dataActions";
const DataComponent = () => {
const dispatch = useDispatch();
const { data, isloading, error } = useSelector((állapot) => állapot.adatok);
 useEffect(() => {
 dispatch (fetchDataRequest({ param1: 'érték1', param2: "érték2" }));
 }, [Elküldés]);
ha (betöltés alatt) {
Visszatérés<div>Betöltés...div>;
 }
ha (hiba) {
Visszatérés<div>Hiba: {error.message}div>;
 }
Visszatérés (



 {data.map((tétel) => (
{tétel.név}</div>
 ))}
 </div>
 );
};
exportalapértelmezett DataComponent;

A fenti példában a useSelector akassza be a React komponenst az adatok beszerzéséhez, isBetöltés, és hiba értékeket a Redux áruházból. Ezenkívül a FETCH_DATA_REQUEST műveletet a következővel küldi el useEffect() hook amikor az alkatrész fel van szerelve. Az adatokat, a betöltési üzenetet vagy a hibaüzenetet attól függően jeleníti meg adat értékek, isBetöltés, és hiba.

A Redux-Saga felhasználásával az adatlekéréshez, aszinkron API-kérelmek kezelése egy React alkalmazásban jelentősen egyszerűsíthető. Karbantarthatóbb és modulárisabb kódot hozhat létre, ha elkülöníti az API-hívás logikáját az összetevőktől, és kezeli az aszinkron folyamatot a Sagas-ban.

A Redux-Saga adatlekéréshez való használatának bevált gyakorlatai

Kövesse az alábbi bevált módszereket, amikor a Redux-Saga-t használja adatlekéréshez:

Használjon külön Saga-t minden adatlekérési művelethez. Ahelyett, hogy az összes logikát egyetlen Saga-ba foglalná, tanácsos különválasztani egy Saga-t minden adatlekérési folyamathoz. A kód karbantartása és módosítása egyszerűbb, mivel bizonyos tevékenységekhez azonnal megtalálhatja a megfelelő Sagákat.
Használja a Redux-Saga beépített hibakezelését. Használhatja a Redux-Saga try/catch blokkját a hibák automatikus kezelésére. Ez lehetővé teszi a hibák központi kezelését, és egységes hibaüzeneteket biztosítunk a felhasználóknak.
A jobb teljesítmény érdekében használjon lemondható sagákat. Ha React összetevőt használ, az számos API-hívást indíthat el. Versenyhelyzetek és szükségtelen programozási interfész hívások származhatnak ebből az API triggerből. Ha új kérés esetén töröl minden folyamatban lévő API-hívást, ezt megakadályozhatja.
Használja a legfrissebb adatokat. Ha több API-kérést is benyújt ugyanarra az adatra, döntő fontosságú annak biztosítása, hogy a legfrissebb adatokat használják. Használni a legújabb hatása, a Redux-Saga segít ennek elérésében. A hatás biztosítja, hogy Ön a legfrissebb vagy legfrissebb API-hívásokat használja, és törli az azonos adatokra vonatkozó függőben lévő API-kéréseket.
Használjon külön fájlt a sagákhoz. A Sagast külön kell tartani a Redux tárolófájltól. Ennek eredményeképpen Saga-ja könnyebben irányítható és tesztelhető lesz.