Avastage, mis on Sagad ja kuidas need aitavad teil tugevamat ja paindlikumat koodi kirjutada.

React ja Redux on populaarsed veebiarendustööriistad oleku haldamiseks ja dünaamiliste kasutajaliideste arendamiseks.

Juurdepääs teabele võib olla keeruline ja aeganõudev, eriti kui tegemist on asünkroonsete sündmustega. Redux-Saga, hõlpsasti kasutatav vahevarapakett, mis haldab asünkroonseid tegevusi, võib seda protsessi lihtsustada.

Siit saate teada, kuidas React luua rakendus, mis hangib andmeid Redux-Sagast.

Redux-Saga mõistmine

Redux-Saga on vahevarapakett, mis muudab kõrvalmõjude, nagu juurdepääs brauseri salvestusruumile ja asünkroonsete API-taotluste haldamise ja testimise lihtsamaks. Generaatori funktsioonide kasutamine muudab asünkroonse koodi sünkroonseks, muutes selle põhjendamise ja silumise lihtsamaks.

Redux-Saga otsib konkreetseid Reduxi toiminguid ja käivitab Sagasid, mis on kõrvalmõjude generaatori funktsioonid. Sagas saab käitada asünkroonseid toiminguid, näiteks hankida andmeid API-st, ja seejärel saata oleku värskendamiseks värske Reduxi toimingu.

instagram viewer

Võtke näiteks Redux-Saga kasutamine asünkroonsete API-kõnede haldamiseks. Alustage Reduxi toimingu loomisega, mis käivitab andmete kogumise:

eksportidakonst FETCH_DATA = „FETCH_DATA”;
eksportidakonst tooda andmed = (parameetrid) => ({
 tüüp: FETCH_DATA,
 kasulik koormus: parameetrid,
});

Toimingu kasulik koormus FETCH_DATA sisaldab kõiki olulisi parameetreid, näiteks API lõpp-punkti ja päringu parameetreid.

Järgmisena määratlege saaga, mis kuulab FETCH_DATA tegevust ja kogub andmeid:

importida { helista, pane, võta viimane } alates"redux-saga/effects";
importida aksiosid alates"axios";
eksportidafunktsiooni* hankidaDataSaga(tegevust) {
proovi {
konst vastus = saagikus call (axios.get, action.payload.endpoint, {
 params: action.payload.params,
 });


saagikus pane({ tüüp: „FETCH_DATA_SUCCESS”, kasulik koormus: vastus.andmed });
 } püüda (viga) {
saagikus pane({ tüüp: „FETCH_DATA_ERROR”, kasulik koormus: viga });
 }
}
eksportidafunktsiooni* vaadake FetchData() {
saagikus takeLatest (FETCH_DATA, fetchDataSaga);
}

See saaga teeb API-kutse aadressile aksiosid raamatukogu kasutades helistama mõju. Seejärel saadab see toodud andmed uue Reduxi toimingu kasuliku koormusena tüübiga FETCH_DATA_SUCCESS. Kui ilmneb tõrge, saadab see välja uue Reduxi toimingu, mille põhikoormuseks on veaobjekt ja mille tüüp on FETCH_DATA_ERROR.

Lõpuks peate registreerima Saga Reduxi poes, kasutades redux-saga vahevara:

importida { applyMiddleware, createStore } alates'redux';
importida loo SagaMiddleware alates"redux-saga";
importida rootReducer alates'./reduktorid';
konst sagaMiddleware = looSagaMiddleware();
konst store = createStore (rootReducer, applyMiddleware (sagaMiddleware));
sagaMiddleware.run (watchFetchData);

Registreerides vaadake FetchData Saga koos uue vahevara vahevaraga loob see kood teise redux-saaga. Vahevara seadistatakse Reduxi poes kasutades ApplyMiddleware.

Redux-Saga pakub üldiselt tugevat ja mitmekülgset lähenemisviisi asünkroonsete tegevuste haldamiseks Reacti Redux rakendusi. Saate lihtsustada andmete toomist ja luua lihtsamat koodi testimiseks, hooldamiseks ja värskendamiseks, kasutades koodivigade kontrollimiseks Sagasi.

Levinud andmete toomise probleemid Reacti rakendustes

Reacti andmete toomise kasutamisel arendajad sageli leiavad mõningaid raskusi. Siin on mõned näited.

  1. Asünkroonsete toimingute haldamine: see on programmeerimisliidese poolt pakutav teave, mis jälgib mittesamaaegseid toiminguid ilma kasutajaliidest (UI) segamata. Mitme API-päringu või muudest andmetest sõltuvate andmetega töötamine võib selle keeruliseks muuta.
  2. Vigade käsitlemine: API-kutsed võivad ebaõnnestuda ja on ülioluline, et käsitleksite neid vigu õigesti. See hõlmab kasutajale veateadete edastamist ja taotluse uuesti esitamise lubamist.
  3. Reduxi poe värskendamine: peaksite API-lt saadud teabe salvestama Reduxi poodi, et teised komponendid saaksid sellele juurde pääseda. Poe värskendamine on ülioluline juba olemasolevaid andmeid segamata või rikkumata.

Kuidas kasutada Redux-Sagat Reactis andmete toomiseks

Redux-Saga kasutamine andmete toomiseks võimaldab teil eraldada API-kõnede tegemise ja Reacti komponentide vastuste käsitlemise loogika. Selle tulemusel saate keskenduda andmete renderdamisele ja kasutaja interaktsioonidele reageerimisele, samal ajal kui Sagas tegeleb asünkroonse andmeotsingu ja vigade haldamisega.

Peate registreerima vaadake FetchData Saaga koos Redux-Saga Vahevara Sagade kasutamiseks meie Reduxi poes:

// src/store.js
importida { CreateStore, applyMiddleware } alates'redux';
importida loo SagaMiddleware alates"redux-saga";
importida rootReducer alates'./reduktorid';
importida { watchFetchData } alates'./sagas/dataSaga';
konst sagaMiddleware = looSagaMiddleware();
konst store = createStore (rootReducer, applyMiddleware (sagaMiddleware));
sagaMiddleware.run (watchFetchData);
eksportidavaikimisi kauplus;

See kood registreerib sagaMiddleware Reduxi poest kasutades rakenda vahevara funktsioon ja loo SagaMiddleware meetod redux-saaga pakett. Seejärel, kasutades jooksma meetodil, käivitab see vaadake FetchData Saaga.

Teie Redux-Saga seadistamine on nüüd lõpetatud, kuna kõik komponendid on paigas. Saaga kasutab hankidaDataApi funktsioon andmete toomiseks, kui teie Reacti komponent saadab toimingu FETCH_DATA_REQUEST. Kui ajastatud andmete toomine õnnestub, saadab see koos toodud andmetega uue tegevuse. Kui esineb tõrge, saadab see veaobjektiga uue toimingu.

// src/components/DataComponent.js
importida Reageerige, { useEffect } alates'reageeri';
importida { useDispatch, useSelector } alates'react-redux';
importida { FetchDataRequest } alates'../actions/dataActions';


konst DataComponent = () => {
konst dispatch = useDispatch();
konst { data, isLoading, error } = useSelector((olek) => olek.andmed);


 useEffect(() => {
 dispatch (fetchDataRequest({ param1: 'value1', param2: 'väärtus2' }));
 }, [saatmine]);


kui (laetakse) {
tagasi<div>Laadimine...div>;
 }


kui (viga) {
tagasi<div>Viga: {error.message}div>;
 }


tagasi (




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


eksportidavaikimisi DataComponent;

Ülaltoodud näites kasutate useSelector andmete hankimiseks ühendage oma React komponent, isLoadingja viga väärtused Reduxi poest. Lisaks saadate toimingu FETCH_DATA_REQUEST, kasutades useEffect() konks kui komponent kinnitub. Renderdate andmed, laadimisteate või veateate olenevalt andmeid väärtused, isLoadingja viga.

Kasutades andmete toomiseks Redux-Sagat, asünkroonsete API päringute haldamine Reacti rakenduses võib oluliselt lihtsustada. Saate luua paremini hooldatavat ja modulaarsemat koodi, eraldades API-kõnede loogika oma komponentidest ja haldades Sagase asünkroonset voogu.

Redux-Saga kasutamise parimad tavad andmete toomiseks

Andmete toomiseks Redux-Saga kasutamisel järgige neid parimaid tavasid.

  1. Kasutage iga andmete toomise toimingu jaoks eraldi Sagasid. Soovitatav on eraldada iga andmete toomise protsessi jaoks saaga, selle asemel, et hõlmata kogu loogika ühte saagasse. Koodi hooldamine ja muutmine on lihtsam, kuna teatud tegevuste jaoks leiate kohe vastavad saagad.
  2. Kasutage Redux-Saga sisseehitatud veakäsitlust. Vigade automaatseks käsitlemiseks saate kasutada Redux-Saga proovi/püüdmise plokki. See võimaldab meil hallata tõrkeid tsentraalselt ja pakkuda kasutajatele ühtseid veateateid.
  3. Parema jõudluse saavutamiseks kasutage tühistatavaid saagasid. Kui kasutate Reacti komponenti, võib see käivitada palju API-kutseid. Sellest API päästikust võivad tuleneda võidusõiduolukorrad ja mittevajalikud programmeerimisliidese kõned. Kui tühistate uue päringu tegemisel käimasolevad API-kõned, saate seda vältida.
  4. Kasutage kõige värskemaid andmeid. Kui esitate samade andmete kohta mitu API-päringut, on ülioluline tagada, et nad kasutaksid kõige värskemaid andmeid. Kasutades viimane Redux-Saga aitab teil seda saavutada. See efekt tagab, et kasutate uusimaid või viimaseid API-kutseid, ja tühistab kõik ootel olevad API-päringud samade andmete kohta.
  5. Kasutage saagade jaoks eraldi faili. Peaksite hoidma Sagasid Reduxi poefailist eraldi. Tänu sellele on teie Sagasid lihtsam kontrollida ja testida.

Andmete toomine Redux-Saga abil

Redux-Saga pakub usaldusväärset ja paindlikku meetodit asünkroonsete ülesannete käsitlemiseks Reacti rakendustes. Sagasi abil saate luua tugevama, testitavama ja paindlikuma koodi, mis eraldab probleemid.

Andmete toomine võib olla keeruline ja veaohtlik, kuid Redux-Saga abil saate seda lihtsamaks muuta. Redux-Saga parandab kasutajakogemust, võimaldades teil usaldusväärselt ja prognoositavalt hallata paljusid asünkroonseid protsesse.

Tänu oma paljudele eelistele ja funktsioonidele on Redux-Saga suurepärane täiendus teie Reacti arendustööriistade kollektsioonile.