Paano Kumuha ng Data Gamit ang Redux-Saga sa isang React na Application

Paano Kumuha ng Data Gamit ang Redux-Saga sa isang React na Application
Ang mga mambabasang tulad mo ay tumutulong sa pagsuporta sa MUO. Kapag bumili ka gamit ang mga link sa aming site, maaari kaming makakuha ng isang affiliate na komisyon. Magbasa pa.

Ang React at Redux ay sikat na web development tool para sa pamamahala ng estado at pagbuo ng mga dynamic na user interface.





Ang pag-access ng impormasyon ay maaaring maging mahirap at matagal, lalo na kapag nakikitungo sa mga asynchronous na kaganapan. Ang Redux-Saga, isang madaling-gamitin na middleware package na namamahala sa mga asynchronous na aktibidad, ay maaaring gawing simple ang prosesong ito.



MAKEUSEOF VIDEO OF THE DAY MAG-SCROLL PARA MAGPATULOY SA NILALAMAN

Alamin kung paano Mag-react upang bumuo ng isang application na kumukuha ng data mula sa Redux-Saga.





Pag-unawa sa Redux-Saga

Ang Redux-Saga ay isang middleware package na ginagawang mas simple ang pamamahala at pagsubok ng mga side effect tulad ng browser storage access at asynchronous na mga kahilingan sa API. Ang paggamit ng mga function ng generator ay nagpapalabas ng asynchronous code na magkakasabay, na ginagawang mas madaling mangatuwiran at mag-debug.

Gumagana ang Redux-Saga sa pamamagitan ng paghahanap ng mga partikular na pagkilos ng Redux at pag-trigger ng Sagas, na mga function ng generator ng side effect. Ang Sagas ay maaaring magpatakbo ng mga asynchronous na operasyon, tulad ng pagkuha ng data mula sa isang API, at pagkatapos ay magpadala ng isang bagong aksyon na Redux upang i-update ang estado.



Kunin ang halimbawa ng paggamit ng Redux-Saga upang pamahalaan ang mga asynchronous na tawag sa API. Magsimula sa pamamagitan ng paglikha ng isang Redux na aksyon na nagpasimula ng pamamaraan ng pangangalap ng data:

 export const FETCH_DATA = 'FETCH_DATA'; 
 
export const fetchData = (params) => ({ 
  type: FETCH_DATA, 
  payload: params, 
});

Kasama sa payload ng pagkilos, FETCH_DATA, ang anumang mahahalagang parameter, tulad ng endpoint ng API at mga parameter ng kahilingan.



Susunod, tumukoy ng Saga na nakikinig sa aktibidad ng FETCH_DATA at gumagawa ng pangangalap ng data:

 import { call, put, takeLatest } from 'redux-saga/effects'; 
import axios from 'axios'; 
 
export function* fetchDataSaga(action) { 
  try { 
    const response = yield call(axios.get, action.payload.endpoint, { 
      params: action.payload.params, 
    }); 
 
    yield put({ type: 'FETCH_DATA_SUCCESS', payload: response.data }); 
  } catch (error) { 
    yield put({ type: 'FETCH_DATA_ERROR', payload: error }); 
  } 
} 
 
export function* watchFetchData() { 
  yield takeLatest(FETCH_DATA, fetchDataSaga); 
}

Ang Saga na ito ay gumagawa ng isang API call sa axios aklatan gamit ang tawag epekto. Pagkatapos ay ipinapadala nito ang nakuhang data bilang isang bagong Redux action payload na may uri na FETCH_DATA_SUCCESS. Kung may naganap na error, nagpapadala ito ng bagong Redux action na may error object bilang payload at isang uri ng FETCH_DATA_ERROR.



Sa wakas, kailangan mong irehistro ang Saga sa Redux store gamit ang redux-saga middleware:

 import { applyMiddleware, createStore } from 'redux'; 
import createSagaMiddleware from 'redux-saga'; 
import rootReducer from './reducers'; 
 
const sagaMiddleware = createSagaMiddleware(); 
const store = createStore(rootReducer, applyMiddleware(sagaMiddleware)); 
sagaMiddleware.run(watchFetchData);

Sa pamamagitan ng pagpaparehistro ng watchFetchData Saga gamit ang bagong instance middleware, ang code na ito ay lumilikha ng isa pa redux saga . Ang middleware ay naka-set up sa Redux store gamit ang Ilapat angMiddleware .

Ang Redux-Saga, sa pangkalahatan, ay nagbibigay ng isang malakas at maraming nalalaman na diskarte para sa pamamahala ng mga asynchronous na aktibidad sa loob Redux ni React mga aplikasyon. Maaari mong i-streamline ang pagkuha ng data at bumuo ng mas madaling code upang subukan, panatilihin, at i-update sa pamamagitan ng paggamit ng Sagas upang makontrol ang mga bug ng code.

filename ay masyadong mahaba upang tanggalin

Mga Karaniwang Isyu sa Pagkuha ng Data sa Mga React na Application

Mayroong ilang mga paghihirap na madalas na nakikita ng mga developer habang ginagamit ang pagkuha ng data ng React. Narito ang ilang halimbawa:

  1. Pamamahala ng mga asynchronous na pagkilos: Ito ay impormasyong ibinibigay ng isang programming interface na sumusubaybay sa mga hindi kasabay na operasyon nang hindi nakikialam sa user interface (UI). Ang pagtatrabaho sa ilang mga kahilingan sa API o data na umaasa sa ibang data ay maaaring maging mahirap.
  2. Pangangasiwa ng mga error: Maaaring mabigo ang mga tawag sa API, at mahalaga na pangasiwaan mo nang tama ang mga error na ito. Kabilang dito ang pagbibigay ng mga mensahe ng error sa user at pagpapahintulot sa kanila na muling isumite ang kahilingan.
  3. Pag-update sa Redux store: Dapat mong i-save ang impormasyong nakuha mula sa isang API sa Redux store para ma-access ito ng ibang mga bahagi. Napakahalaga na i-update ang tindahan nang hindi nakikialam o nakakasira sa mayroon nang data.

Paano Gamitin ang Redux-Saga para sa Pagkuha ng Data sa React

Ang paggamit ng Redux-Saga para sa pagkuha ng data ay nagbibigay-daan sa iyong paghiwalayin ang lohika para sa paggawa ng mga tawag sa API at pagharap sa tugon mula sa iyong mga bahagi ng React. Bilang resulta, maaari kang tumuon sa pag-render ng data at pagtugon sa mga pakikipag-ugnayan ng user habang pinangangasiwaan ng Sagas ang asynchronous na pagkuha ng data at pamamahala ng error.

Kailangan mong irehistro ang watchFetchData Saga kasama ang Redux-Saga middleware para gamitin ang Sagas sa aming Redux store:

 // src/store.js 
import { createStore, applyMiddleware } from 'redux'; 
import createSagaMiddleware from 'redux-saga'; 
import rootReducer from './reducers'; 
import { watchFetchData } from './sagas/dataSaga'; 
 
const sagaMiddleware = createSagaMiddleware(); 
const store = createStore(rootReducer, applyMiddleware(sagaMiddleware)); 
sagaMiddleware.run(watchFetchData); 
 
export default store;

Inirerehistro ng code na ito ang sagaMiddleware gamit ang Redux store gamit ang applyMiddleware function at ang createSagaMiddleware paraan ng redux saga pakete. Pagkatapos, gamit ang tumakbo pamamaraan, isinasagawa nito ang watchFetchData Saga.

Kumpleto na ang iyong pag-setup ng Redux-Saga ngayong nasa lugar na ang bawat bahagi. Ginagamit ng Saga ang fetchDataApi function upang kunin ang data kapag ipinadala ng iyong React component ang FETCH_DATA_REQUEST na pagkilos. Kung matagumpay ang naka-iskedyul na pagkuha ng data, magpapadala ito ng isa pang aktibidad kasama ang kinuhang data. Kung mayroong error, nagpapadala ito ng bagong aksyon kasama ang object ng error.

 // src/components/DataComponent.js 
 
import React, { useEffect } from 'react'; 
import { useDispatch, useSelector } from 'react-redux'; 
import { fetchDataRequest } from '../actions/dataActions'; 
 
const DataComponent = () => { 
  const dispatch = useDispatch(); 
  const { data, isLoading, error } = useSelector((state) => state.data); 
 
  useEffect(() => { 
    dispatch(fetchDataRequest({ param1: 'value1', param2: 'value2' })); 
  }, [dispatch]); 
 
  if (isLoading) { 
    return <div>Loading...</div>; 
  } 
 
  if (error) { 
    return <div>Error: {error.message}</div>; 
  } 
 
  return ( 
    <div> 
      {data.map((item) => ( 
        <div key={item.id}>{item.name}</div> 
      ))} 
    </div> 
  ); 
}; 
 
export default DataComponent;

Sa halimbawa sa itaas, ginagamit mo ang useSelector hook sa iyong React component para makuha ang data, isLoading , at pagkakamali mga halaga mula sa Redux store. Bilang karagdagan, ipinapadala mo ang pagkilos na FETCH_DATA_REQUEST gamit ang useEffect() hook kapag naka-mount ang component. I-render mo ang data, naglo-load ng mensahe, o mensahe ng error depende sa datos mga halaga, isLoading , at pagkakamali .

Sa pamamagitan ng paggamit ng Redux-Saga para sa pagkuha ng data, pamamahala ng mga asynchronous na kahilingan sa API sa isang React na application maaaring makabuluhang streamlined. Maaari kang lumikha ng mas mapanatili at modular na code sa pamamagitan ng paghiwalay ng lohika ng tawag sa API mula sa iyong mga bahagi at pamamahala sa asynchronous na daloy sa Sagas.

Pinakamahuhusay na Kasanayan sa Paggamit ng Redux-Saga para sa Pagkuha ng Data

Sundin ang pinakamahuhusay na kagawiang ito habang ginagamit ang Redux-Saga para sa pagkuha ng data:

  1. Gumamit ng natatanging Sagas para sa bawat operasyon ng pagkuha ng data. Maipapayo na paghiwalayin ang isang Saga para sa bawat proseso ng pagkuha ng data sa halip na isama ang lahat ng lohika sa isang Saga. Ang pagpapanatili at pagbabago ng code ay mas simple dahil mahahanap mo kaagad ang nauugnay na Sagas para sa ilang partikular na aktibidad.
  2. Gamitin ang built-in na error handling ng Redux-Saga. Maaari mong gamitin ang try/catch block ng Redux-Saga upang awtomatikong mahawakan ang mga error. Nagbibigay-daan ito sa amin na pamahalaan ang mga pagkabigo sa gitnang bahagi at bigyan ang mga user ng magkakatulad na mensahe ng error.
  3. Gumamit ng mga nakanselang saga para sa mas mahusay na pagganap. Kapag gumamit ka ng React component, maaari itong mag-trigger ng maraming API call. Ang mga sitwasyon ng lahi at hindi kinakailangang mga tawag sa interface ng Programming ay maaaring magresulta mula sa trigger ng API na ito. Sa pamamagitan ng pagkansela ng anumang mga kasalukuyang tawag sa API kapag gumawa ka ng bagong kahilingan, mapipigilan mo ito.
  4. Gamitin ang pinakabagong data. Kapag gumagawa ng ilang kahilingan sa API para sa parehong data, mahalagang tiyaking ginagamit nila ang pinakabagong data. Gamit ang pinakabago effect, tinutulungan ka ng Redux-Saga na makamit ito. Tinitiyak ng epekto na ginagamit mo ang pinakabago o pinakabagong mga tawag sa API at kinakansela ang anumang nakabinbing kahilingan sa API para sa parehong data.
  5. Gumamit ng hiwalay na file para sa sagas. Dapat mong panatilihing hiwalay ang Sagas mula sa file ng Redux store. Bilang resulta, ang iyong Sagas ay magiging mas madaling kontrolin at pagsubok.

Kunin ang Data Gamit ang Redux-Saga

Nag-aalok ang Redux-Saga ng maaasahan at nababaluktot na paraan para sa paghawak ng mga asynchronous na gawain sa mga application ng React. Gamit ang Sagas, makakagawa ka ng mas matatag, masusubok, at flexible na code na naghihiwalay sa mga alalahanin.

Ang pagkuha ng data ay maaaring isang mahirap at madaling gawin na operasyon, ngunit maaari mo itong gawing mas simple sa tulong ng Redux-Saga. Pinapabuti ng Redux-Saga ang karanasan ng user sa pamamagitan ng pagpapahintulot sa iyo na mapagkakatiwalaan at predictably na pamahalaan ang maraming mga prosesong asynchronous.

Dahil sa maraming benepisyo at feature nito, ang Redux-Saga ay isang kamangha-manghang karagdagan sa iyong koleksyon ng mga tool sa pagbuo ng React.