Sužinokite, kas yra Sagas ir kaip jos gali padėti parašyti tvirtesnį, lankstesnį kodą.

„React“ ir „Redux“ yra populiarūs žiniatinklio kūrimo įrankiai, skirti valdyti būseną ir kurti dinamines vartotojo sąsajas.

Prieiga prie informacijos gali būti sudėtinga ir užima daug laiko, ypač kai susiduriama su asinchroniniais įvykiais. Redux-Saga, lengvai naudojamas tarpinės programinės įrangos paketas, valdantis asinchroninę veiklą, gali supaprastinti šį procesą.

Sužinokite, kaip „React“ sukurti programą, kuri nuskaito duomenis iš „Redux-Saga“.

„Redux-Saga“ supratimas

Redux-Saga yra tarpinės programinės įrangos paketas, leidžiantis paprasčiau valdyti ir išbandyti šalutinį poveikį, pvz., prieigą prie naršyklės saugyklos ir asinchronines API užklausas. Naudojant generatoriaus funkcijas asinchroninis kodas atrodo sinchroniškas, todėl lengviau svarstyti ir derinti.

„Redux-Saga“ veikia ieškodama konkrečių „Redux“ veiksmų ir suaktyvindama „Sagas“, kurios yra šalutinio poveikio generatoriaus funkcijos. „Sagas“ gali vykdyti asinchronines operacijas, pvz., gauti duomenis iš API, o tada išsiųsti naują „Redux“ veiksmą būsenai atnaujinti.

instagram viewer

Paimkite pavyzdį, kaip naudoti „Redux-Saga“ asinchroniniams API skambučiams valdyti. Pradėkite sukurdami Redux veiksmą, kuris inicijuoja duomenų rinkimo procedūrą:

eksportuotikonst FETCH_DATA = „FETCH_DATA“;
eksportuotikonst fetchData = (parametrai) => ({
 tipas: FETCH_DATA,
 naudingoji apkrova: parametrai,
});

Veiksmo naudingoji apkrova, FETCH_DATA, apima visus esminius parametrus, pvz., API galutinį tašką ir užklausos parametrus.

Tada apibrėžkite Saga, kuri klausosi FETCH_DATA veiklos ir renka duomenis:

importuoti { call, put, takeLatest } iš„redux-saga/effects“;
importuoti aksios iš"aksios";
eksportuotifunkcija* fetchDataSaga(veiksmas) {
bandyti {
konst atsakymas = derlius skambutis (axios.get, action.payload.endpoint, {
 params: action.payload.params,
 });


derlius įdėti({ tipo: „FETCH_DATA_SUCCESS“, naudingoji apkrova: atsakymas.duomenys });
 } sugauti (klaida) {
derlius įdėti({ tipo: „FETCH_DATA_ERROR“, naudingoji apkrova: klaida });
 }
}
eksportuotifunkcija* WatchFetchData() {
derlius takeLatest (FETCH_DATA, fetchDataSaga);
}

Ši Saga atlieka API iškvietimą į aksios biblioteka naudojant skambinti poveikis. Tada jis siunčia gautus duomenis kaip naują „Redux“ veiksmo naudingą apkrovą, kurios tipas yra FETCH_DATA_SUCCESS. Jei įvyksta klaida, jis išsiunčia naują Redux veiksmą, kurio naudingoji apkrova yra klaidos objektas ir FETCH_DATA_ERROR tipas.

Galiausiai turite užregistruoti „Saga“ „Redux“ parduotuvėje naudodami „redux-saga“ tarpinę programinę įrangą:

importuoti { applicationMiddleware, createStore } iš"redux";
importuoti sukurti SagaMiddleware iš"redux-saga";
importuoti rootReducer iš„./reduktoriai“;
konst sagaMiddleware = sukurtiSagaMiddleware();
konst store = createStore (rootReducer, applyMiddleware (sagaMiddleware));
sagaMiddleware.run (watchFetchData);

Registruodamiesi WatchFetchData Saga su nauja tarpine programine įranga, šis kodas sukuria kitą redux-saga. Tarpinė programinė įranga yra nustatyta Redux parduotuvėje naudojant ApplyMiddleware.

„Redux-Saga“ apskritai suteikia tvirtą ir universalų metodą, kaip valdyti asinchroninę veiklą React's Redux programos. Galite supaprastinti duomenų gavimą ir lengviau generuoti kodą, kurį norite išbandyti, prižiūrėti ir atnaujinti, naudodami Sagas kodo klaidoms valdyti.

Dažnos duomenų gavimo problemos „React“ programose

Yra keletas sunkumų, su kuriais kūrėjai dažnai susiduria naudodamiesi „React“ duomenų gavimu. Štai keli pavyzdžiai:

  1. Asinchroninių veiksmų valdymas: tai informacija, kurią teikia programavimo sąsaja, kuri stebi nelygiagrečias operacijas netrukdydama vartotojo sąsajai (UI). Tai gali būti sudėtinga dirbant su keliomis API užklausomis arba duomenimis, kurie priklauso nuo kitų duomenų.
  2. Klaidų tvarkymas: API skambučiai gali nepavykti, todėl labai svarbu, kad šias klaidas tvarkytumėte teisingai. Tai apima klaidų pranešimų pateikimą vartotojui ir leidimą iš naujo pateikti užklausą.
  3. „Redux“ parduotuvės atnaujinimas: „Redux“ parduotuvėje turėtumėte išsaugoti informaciją, gautą iš API, kad kiti komponentai galėtų ją pasiekti. Labai svarbu atnaujinti parduotuvę nesikišant į jau turimus duomenis ir jų nepažeidžiant.

Kaip naudoti „Redux-Saga“ duomenų gavimui „React“.

Naudojant „Redux-Saga“ duomenims gauti, galite atskirti API skambučių logiką ir atsakymą iš „React“ komponentų. Dėl to galite sutelkti dėmesį į duomenų pateikimą ir reaguoti į vartotojo sąveiką, o Sagas tvarko asinchroninį duomenų gavimą ir klaidų valdymą.

Jums reikia užsiregistruoti WatchFetchData Saga su Redux-Saga Tarpinė programinė įranga, skirta naudoti Sagas mūsų Redux parduotuvėje:

// src/store.js
importuoti { CreateStore, applyMiddleware } iš"redux";
importuoti sukurti SagaMiddleware iš"redux-saga";
importuoti rootReducer iš„./reduktoriai“;
importuoti { watchFetchData } iš„./sagas/dataSaga“;
konst sagaMiddleware = sukurtiSagaMiddleware();
konst store = createStore (rootReducer, applyMiddleware (sagaMiddleware));
sagaMiddleware.run (watchFetchData);
eksportuotinumatytas parduotuvė;

Šis kodas registruoja saga Vidurinė programinė įranga su Redux parduotuve naudojant taikyti vidurinę programinę įrangą funkcija ir sukurti SagaMiddleware metodas redux-saga paketą. Tada, naudojant paleisti metodas, jis vykdo WatchFetchData Saga.

„Redux-Saga“ sąranka baigta, nes kiekvienas komponentas yra vietoje. Saga naudoja fetchDataApi funkcija gauti duomenis, kai jūsų React komponentas siunčia veiksmą FETCH_DATA_REQUEST. Jei suplanuotas duomenų gavimas sėkmingas, jis siunčia kitą veiklą su gautais duomenimis. Jei yra klaida, jis siunčia naują veiksmą su klaidos objektu.

// src/components/DataComponent.js
importuoti Reaguoti, { useEffect } iš'reaguoti';
importuoti { UseDispatch, useSelector } iš'react-redux';
importuoti { FetchDataRequest } iš„../actions/dataActions“;


konst DataComponent = () => {
konst dispatch = useDispatch();
konst { data, isloading, error } = useSelector((valstybė) => būsena.duomenys);


 useEffect (() => {
 dispatch (fetchDataRequest({ param1: 'value1', param2: 'vertė2' }));
 }, [išsiuntimas]);


jeigu (įkeliama) {
grąžinti<div>Įkeliama...div>;
 }


jeigu (klaida) {
grąžinti<div>Klaida: {error.message}div>;
 }


grąžinti (




 {data.map((daiktas) => (
{item.name}</div>
 ))}
 </div>
 );
};


eksportuotinumatytas DataComponent;

Aukščiau pateiktame pavyzdyje naudojate useSelector prijunkite savo React komponentą, kad gautumėte duomenis, iskraunama, ir klaida vertės iš Redux parduotuvės. Papildomai siunčiate veiksmą FETCH_DATA_REQUEST naudodami useEffect() kabliukas kai komponentas pritvirtinamas. Duomenis, įkėlimo pranešimą arba klaidos pranešimą pateikiate priklausomai nuo duomenis vertybes, iskraunama, ir klaida.

Naudodami Redux-Saga duomenų gavimui, valdyti asinchronines API užklausas „React“ programoje gali būti gerokai supaprastintas. Galite sukurti labiau prižiūrimą ir modulinį kodą, atskirdami API skambučio logiką nuo komponentų ir valdydami asinchroninį srautą „Sagas“.

Geriausia „Redux-Saga“ naudojimo duomenų gavimui praktika

Naudodami „Redux-Saga“ duomenims gauti, vadovaukitės šia geriausia praktika:

  1. Kiekvienai duomenų gavimo operacijai naudokite atskiras Sagas. Patartina atskirti Saga kiekvienam duomenų gavimo procesui, o ne įtraukti visą logiką į vieną Saga. Prižiūrėti ir keisti kodą yra paprasčiau, nes galite iš karto rasti atitinkamas Sagas tam tikrai veiklai.
  2. Naudokite Redux-Saga integruotą klaidų apdorojimą. Norėdami automatiškai tvarkyti klaidas, galite naudoti „Redux-Saga“ try/catch bloką. Tai leidžia centralizuotai valdyti gedimus ir pateikti vartotojams vienodus klaidų pranešimus.
  3. Norėdami geresnio našumo, naudokite atšaukiamas sagas. Kai naudojate „React“ komponentą, jis gali suaktyvinti daug API iškvietimų. Dėl šio API aktyviklio gali atsirasti lenktynių situacijos ir nereikalingi programavimo sąsajos iškvietimai. Atšaukdami bet kokius vykstančius API skambučius, kai pateikiate naują užklausą, galite to išvengti.
  4. Naudokite naujausius duomenis. Pateikiant kelias API užklausas dėl tų pačių duomenų, labai svarbu užtikrinti, kad būtų naudojami naujausi duomenys. Naudojant naujausias Redux-Saga padeda tai pasiekti. Šis efektas užtikrina, kad naudojate naujausius arba naujausius API iškvietimus, ir atšaukia visas laukiančias API užklausas dėl tų pačių duomenų.
  5. Sagoms naudokite atskirą failą. Turėtumėte laikyti Sagas atskirai nuo Redux parduotuvės failo. Dėl to jūsų Sagas bus lengviau valdyti ir išbandyti.

Gaukite duomenis naudodami „Redux-Saga“.

„Redux-Saga“ siūlo patikimą ir lankstų asinchroninių užduočių tvarkymo „React“ programose metodą. Naudodami Sagas galite sukurti patikimesnį, testuojamesnį ir lankstesnį kodą, kuris atskirtų problemas.

Duomenų gavimas gali būti sudėtinga ir dažnai klaidų operacija, tačiau ją galite supaprastinti naudodami „Redux-Saga“. Redux-Saga pagerina vartotojo patirtį, leisdama patikimai ir nuspėjamai valdyti daugelį asinchroninių procesų.

Dėl daugybės privalumų ir funkcijų „Redux-Saga“ yra puikus jūsų „React“ kūrimo įrankių kolekcijos papildymas.