Odkrijte, kaj so sage in kako vam lahko pomagajo pri pisanju bolj robustne in prilagodljive kode.
React in Redux sta priljubljeni spletni razvojni orodji za upravljanje stanja in razvoj dinamičnih uporabniških vmesnikov.
Dostop do informacij je lahko težaven in dolgotrajen, zlasti pri asinhronih dogodkih. Redux-Saga, paket vmesne programske opreme, enostaven za uporabo, ki upravlja asinhrone dejavnosti, lahko poenostavi ta postopek.
Naučite se, kako React zgraditi aplikacijo, ki pridobi podatke iz Redux-Saga.
Razumevanje Redux-Saga
Redux-Saga je paket vmesne programske opreme, ki poenostavi upravljanje in preizkušanje stranskih učinkov, kot so dostop do pomnilnika brskalnika in asinhrone zahteve API-ja. Z uporabo generatorskih funkcij je asinhrona koda videti sinhrona, kar olajša razmišljanje in odpravljanje napak.
Redux-Saga deluje tako, da išče določene akcije Redux in sproži Sagas, ki so funkcije generatorja stranskih učinkov. Sagas lahko izvaja asinhrone operacije, kot je pridobivanje podatkov iz API-ja, in nato pošlje novo dejanje Redux za posodobitev stanja.
Vzemite primer uporabe Redux-Saga za upravljanje asinhronih klicev API-ja. Začnite z ustvarjanjem dejanja Redux, ki sproži postopek zbiranja podatkov:
izvozkonst FETCH_DATA = 'FETCH_DATA';
izvozkonst pridobi podatke = (params) => ({
tip: FETCH_DATA,
nosilnost: parametri,
});
Obremenitev dejanja, FETCH_DATA, vključuje vse bistvene parametre, kot so končna točka API in parametri zahteve.
Nato definirajte Sago, ki posluša dejavnost FETCH_DATA in izvaja zbiranje podatkov:
uvoz { pokliči, daj, vzemi Najnovejše } od'redux-saga/učinki';
uvoz axios od'axios';izvozfunkcijo* fetchDataSaga(ukrepanje) {
poskusi {
konst odgovor = donos klic (axios.get, action.payload.endpoint, {
parametri: action.payload.params,
});donos postavi({ vrsta: 'FETCH_DATA_SUCCESS', tovor: response.data });
} ulov (napaka) {
donos postavi({ vrsta: 'FETCH_DATA_ERROR', tovor: napaka });
}
}
izvozfunkcijo* watchFetchData() {
donos takeLatest (FETCH_DATA, fetchDataSaga);
}
Ta Saga kliče API na axios knjižnica z uporabo klic učinek. Nato prenese pridobljene podatke kot nov koristni tovor dejanja Redux z vrsto FETCH_DATA_SUCCESS. Če pride do napake, pošlje novo dejanje Redux z objektom napake kot obremenitvijo in vrsto FETCH_DATA_ERROR.
Nazadnje morate registrirati Sago v trgovini Redux s pomočjo vmesne programske opreme redux-saga:
uvoz { applyMiddleware, createStore } od'redux';
uvoz createSagaMiddleware od'redux-saga';
uvoz rootReducer od'./reducers';
konst sagaMiddleware = createSagaMiddleware();
konst trgovina = createStore (rootReducer, applyMiddleware (sagaMiddleware));
sagaMiddleware.run (watchFetchData);
Z registracijo v watchFetchData Saga z novo vmesno programsko opremo primerka, ta koda ustvari drugo redux-saga. Vmesna programska oprema je nastavljena v trgovini Redux z uporabo ApplyMiddleware.
Redux-Saga na splošno zagotavlja močan in vsestranski pristop za upravljanje asinhronih dejavnosti znotraj Reactov Redux aplikacije. Lahko poenostavite pridobivanje podatkov in ustvarite lažjo kodo za testiranje, vzdrževanje in posodabljanje z uporabo Sagas za nadzor napak kode.
Pogoste težave pri pridobivanju podatkov v aplikacijah React
Obstaja nekaj težav, na katere razvijalci pogosto naletijo pri uporabi Reactovega pridobivanja podatkov. Tukaj je nekaj primerov:
- Upravljanje asinhronih dejanj: To so informacije, ki jih posreduje programski vmesnik, ki spremlja nehkratne operacije brez poseganja v uporabniški vmesnik (UI). Delo z več zahtevami API ali podatki, ki so odvisni od drugih podatkov, lahko to oteži.
- Obravnavanje napak: klici API-ja lahko spodletijo in ključno je, da te napake pravilno obravnavate. To vključuje pošiljanje sporočil o napaki uporabniku in omogočanje ponovne oddaje zahteve.
- Posodabljanje trgovine Redux: informacije, pridobljene iz API-ja, shranite v trgovino Redux, da lahko druge komponente dostopajo do njih. Bistveno je posodobiti trgovino, ne da bi posegali ali poškodovali že obstoječe podatke.
Kako uporabljati Redux-Saga za pridobivanje podatkov v Reactu
Uporaba Redux-Saga za pridobivanje podatkov vam omogoča, da ločite logiko za klice API-ja in obravnavanje odziva od komponent React. Posledično se lahko osredotočite na upodabljanje podatkov in odzivanje na interakcije uporabnikov, medtem ko Sagas obravnava asinhrono pridobivanje podatkov in upravljanje napak.
Registrirati se morate na watchFetchData Saga z Redux-Saga vmesna programska oprema za uporabo Sagas v naši trgovini Redux:
// src/store.js
uvoz { createStore, applyMiddleware } od'redux';
uvoz createSagaMiddleware od'redux-saga';
uvoz rootReducer od'./reducers';
uvoz {watchFetchData} od'./sagas/dataSaga';konst sagaMiddleware = createSagaMiddleware();
konst trgovina = createStore (rootReducer, applyMiddleware (sagaMiddleware));
sagaMiddleware.run (watchFetchData);
izvozprivzeto trgovina;
Ta koda registrira sagaMiddleware s trgovino Redux z uporabo applyMiddleware funkcijo in createSagaMiddleware metoda redux-saga paket. Nato z uporabo teči metodo, izvaja watchFetchData Saga.
Vaša nastavitev Redux-Saga je zdaj končana, ko so vse komponente na svojem mestu. Saga uporablja fetchDataApi funkcijo za pridobivanje podatkov, ko vaša komponenta React pošlje dejanje FETCH_DATA_REQUEST. Če je načrtovani prenos podatkov uspešen, odpošlje drugo dejavnost s pridobljenimi podatki. Če pride do napake, pošlje novo dejanje z objektom napake.
// src/components/DataComponent.jsuvoz Reagiraj, {useEffect} od'reagirati';
uvoz {useDispatch, useSelector} od'react-redux';
uvoz {fetchDataRequest} od'../actions/dataActions';konst DataComponent = () => {
konst dispatch = useDispatch();
konst { podatki, isLoading, napaka } = useSelector((država) => stanje.podatki);useEffect(() => {
dispatch (fetchDataRequest({ param1: 'vrednost1', param2: 'vrednost2' }));
}, [odprema]);če (isLoading) {
vrnitev<div>Nalaganje...div>;
}če (napaka) {
vrnitev<div>Napaka: {error.message}div>;
}vrnitev (
{data.map((postavka) => ({item.name}</div>
))}
</div>
);
};
izvozprivzeto DataComponent;
V zgornjem primeru uporabite useSelector vključite svojo komponento React, da dobite podatke, isLoading, in napaka vrednosti iz trgovine Redux. Dejanje FETCH_DATA_REQUEST dodatno pošljete z uporabo kavelj useEffect(). ko se komponenta namesti. Podatke, sporočilo o nalaganju ali sporočilo o napaki upodabljate glede na podatke vrednote, isLoading, in napaka.
Z uporabo Redux-Saga za pridobivanje podatkov, upravljanje asinhronih zahtev API v aplikaciji React se lahko znatno poenostavi. Ustvarite lahko bolj vzdržljivo in modularno kodo tako, da logiko klica API izločite iz svojih komponent in upravljate asinhroni tok v Sagas.
Najboljše prakse za uporabo Redux-Saga za pridobivanje podatkov
Pri uporabi Redux-Saga za pridobivanje podatkov upoštevajte te najboljše prakse:
- Za vsako operacijo pridobivanja podatkov uporabite različne sage. Priporočljivo je, da ločite Sago za vsak postopek pridobivanja podatkov, namesto da vključite vso logiko v eno Sago. Vzdrževanje in spreminjanje kode je preprostejše, saj lahko takoj najdete ustrezne sage za določene dejavnosti.
- Uporabite vgrajeno obravnavo napak Redux-Saga. Za samodejno obravnavanje napak lahko uporabite Redux-Sagin blok try/catch. To nam omogoča centralno upravljanje napak in uporabnikom zagotavlja enotna sporočila o napakah.
- Za boljše delovanje uporabite sage, ki jih je mogoče preklicati. Ko uporabljate komponento React, lahko sproži številne klice API-ja. Zaradi tega sprožilca API-ja lahko nastanejo dirkalne situacije in nepotrebni klici programskega vmesnika. Če prekličete vse tekoče klice API-ja, ko naredite novo zahtevo, lahko to preprečite.
- Uporabite najnovejše podatke. Ko podajate več zahtev API za iste podatke, je ključnega pomena zagotoviti, da uporabljajo najnovejše podatke. Uporabljati najnovejši učinek, vam Redux-Saga to pomaga doseči. Učinek zagotavlja, da uporabljate najnovejše ali najnovejše klice API-ja, in prekliče vse čakajoče zahteve API-ja za iste podatke.
- Za sage uporabite ločeno datoteko. Sage morate hraniti ločeno od datoteke trgovine Redux. Posledično bo vaše Sage lažje nadzorovati in testirati.
Pridobite podatke z Redux-Saga
Redux-Saga ponuja zanesljivo in prilagodljivo metodo za obravnavanje asinhronih nalog v aplikacijah React. Z uporabo Sagas lahko ustvarite bolj robustno, preizkuljivo in prilagodljivo kodo, ki ločuje pomisleke.
Pridobivanje podatkov je lahko težavna operacija, ki je nagnjena k napakam, vendar jo lahko poenostavite s pomočjo Redux-Saga. Redux-Saga izboljšuje uporabniško izkušnjo, saj vam omogoča zanesljivo in predvidljivo upravljanje številnih asinhronih procesov.
Zaradi številnih prednosti in funkcij je Redux-Saga fantastičen dodatek k vaši zbirki razvojnih orodij React.