obtener datos de api usando redux redux saga y ejemplo de código axios

Este grupo especializado luego de algunos días de trabajo y de juntar de datos, dimos con la solución, deseamos que todo este artículo sea de gran utilidad para tu proyecto.

Ejemplo: redux saga obtiene datos usando axios

//EXAMPLE FETCH DATA API REDUX SAGA// USER ACTION CREATORexportconstREQUEST_API_DATA='REQUEST_API_DATA'exportconstRECEIVE_API_DATA='RECEIVE_API_DATA'exportconstrequestApiData=()=>( type:REQUEST_API_DATA)// USER REDUCERimportREQUEST_API_DATA,RECEIVE_API_DATAfrom'../actions/user'exportdefault(state =, type, payload )=>switch(type)caseRECEIVE_API_DATA:return payload.usersdefault:return state
  // USER SAGAimportaxiosfrom'axios'import call, put, takeEvery, takeLatest from'redux-saga/effects'importREQUEST_API_DATA,RECEIVE_API_DATAfrom'./actions/user'function*userReceiveAll(action)tryconst data =yieldcall(axios.get,'https://jsonplaceholder.typicode.com/users')yieldput( type:RECEIVE_API_DATA, payload: users: data )catch(e)console.log(e.message)exportdefaultfunction*userSendAll()yieldtakeLatest(REQUEST_API_DATA, getApiData)// REDUX STOREimport createStore, applyMiddleware, combineReducer from'redux'importcreateSagaMiddlewarefrom'redux-saga'import all from'redux-saga/effects'importloggerfrom'redux-logger'importuserReducerfrom'./reducers/user'importuserSagafrom'./sagas/user'function*saga()yieldall([userSaga()])exportconststore=()=>const sagaMiddleware =createSagaMiddleware()const store =createStore(combineReducer(users: userReducer),applyMiddleware(sagaMiddleware, logger)) 
 sagaMiddleware.run(saga)return store;// USER COMPONENTimportReactfrom'react'import connect from'react-redux'import requestApiData from'./actions'classUserextendsReact.ComponentcomponentDidMount()this.props.fetchAll()render()const users =this.props.stateconst results = users.length>0? users :[]return(<div>results.map((v)=>(<ul key=v.id><li>v.username</li></ul>))</div>)constmapStateToProps=(state)=>( state )constmapDispatchToProps=(dispatch)=>(fetchAll:()=>dispatch(requestApiData()))exportdefaultconnect(mapStateToProps, mapDispatchToProps)(User)

Reseñas y puntuaciones del artículo

Si estás contento con lo expuesto, puedes dejar un post acerca de qué le añadirías a este tutorial.

---

---

Utiliza Nuestro Buscador