I'm trying to fetch data from API In my redux-saga but I'm getting following error from here const {body: {data}} =yield getData() in my redux-saga:
cannot read property body of udefined
Here is my API Function:
export function* getData() {
yield agent
.get(
"https://pro-api.coinmarketcap.com/v1/cryptocurrency/listings/latest?CMC_PRO_API_KEY=xxx"
)
.then((res) => {
getCurrencies(res.body.data);
console.log('--------res.body.data', res.body.data);
setPageCount();
})
.catch((err) => {
console.log(err);
});
}
.then is returning the data itself,So it is not undefined
Here is my redux-saga itself:
function* loadDataAsync() {
console.log("SAGAS WORKS");
yield delay(5000);
try {
const {body: {data}} =yield getData()
console.log(data)
yield put({type:"LOAD_DATA_ASYNC_SUCCESS"});
} catch (err) {
console.log(err)
yield put({type:"LOAD_DATA_ASYNC_ERROR"})
}
}
export function* watchLoadDataAsync() {
yield takeLatest("LOAD_DATA_ASYNC", loadDataAsync);
}
Any solutions please?
You need to use call to get the data back from your asynchronous action
function* loadDataAsync() {
console.log("SAGAS WORKS");
yield delay(5000);
try {
const {body: {}} = yield call(agent.get, "https://pro-api.coinmarketcap.com/v1/cryptocurrency/listings/latest?CMC_PRO_API_KEY=xxx");
console.log(body.data);
// Call your other functions here
getCurrencies(body.data);
setPageCount();
yield put({type:"LOAD_DATA_ASYNC_SUCCESS"});
} catch (err) {
console.log(err)
yield put({type:"LOAD_DATA_ASYNC_ERROR"})
}
}
For more information check out the official docs for call
Related
I' trying to filter my redux-saga generator functions api response like this.
function* loadSingleDataAsync(id) {
console.log('Second Saga Works');
let wholeData = [];
let singleData = [];
agent
.get(
`https://pro-api.coinmarketcap.com/v1/cryptocurrency/listings/latest?CMC_PRO_API_KEY=xxx`
)
.then((res) => {
wholeData = [...res.body.data];
singleData = wholeData.filter((currencie) => currencie.id === id);
})
.catch((err) => {
console.log('--------err', err);
});
yield delay(700);
yield put({ type: 'RECEIVE_SINGLE_API_DATA_ASYNC', singleData });
}
After this I'm calling it this way:
export function* rootSaga() {
yield all([takeEvery('RECEIVE_API_DATA', loadDataAsync), takeEvery('RECEIVE_SINGLE_API_DATA', loadSingleDataAsync)]);
}
The first function is working but the second don't,Any suggestions why?
Adding a try, catch inside the saga helps you to know if the saga chain is broken because of any empty responses or data issues.
I want to fetch api data with redux-saga .
Here is how I call my api :
export const getData = () => {
agent
.get(
"https://pro-api.coinmarketcap.com/v1/cryptocurrency/listings/latest?CMC_PRO_API_KEY=XXX"
)
.then((res) => {
console.log(res.body.data)
})
.catch((err) => {
console.log(err);
});
};
Here is my redux-saga :
import { takeLatest, put } from "redux-saga/effects";
import { delay } from "redux-saga/effects";
function* loadDataAsync() {
yield delay(500);
yield put({ type: "LOAD_DATA_ASYNC" });
}
export function* watchloadData() {
console.log("Im working buddy");
yield takeLatest("LOAD_DATA", loadDataAsync);
}
The problem Is I don't really know how to fetch data through redux-saga,I tried to do research but none of the information seemed to satisfy me.
Could you please give me some suggestions?
The problem Is I don't really know how to fetch data through redux-saga,
No, the problem is you don't really know function generators in javascript.
Anyways if I were to architect that piece of code I would do something like this:
export function* getData(){
yield agent
.get(
"https://pro-api.coinmarketcap.com/v1/cryptocurrency/listings/latest?CMC_PRO_API_KEY=XXX"
)
};
And then:
function* loadDataAsync() {
try {
const { body: { data } } = yield getData();
console.log(data);
yield put({ type: "LOAD_DATA_ASYNC_SUCCESS" });
} catch(err) {
console.log(err);
yield put({ type: "LOAD_DATA_ASYNC_FAILED" });
}
}
I'm using redux-saga to fetch server api data.
My question is that I'm trying to design following code.
However yield put(get01Action(members)); which is commented out has following Syntax error.
A 'yield' expression is only allowed in a generator body.
I don't know how to manage it.
import '#babel/polyfill';
import { fork, take, put } from 'redux-saga/effects';
import axios from "axios";
export function* rootSaga(){
yield fork(fetch01);
yield fork(fetch02);
}
function* fetch01() {
while (true){
yield take('FETCH01_REQUEST');
axios.get('/api/members')
.then(function (response) {
// handle success
let members = response.data.data;
// yield put(get01Action(members));
})
.catch(function (error) {
// handle error
console.log(error);
})
.finally(function () {
// always executed
});
}
}
function* fetch02() {
....
}
function get01Action(members){
return {
type: 'GET_MEMBERS',
member_id: 0,
members: members
}
}
Please give me some advice.
Thanks.
Because your generator fetch01 is sync but you're waiting an Promise to be resovled.
yield can not be wrapped in other functions other than generators.
You can make the generator async, like this:
export async function* rootSaga(){
yield await fork(fetch01);
yield fork(fetch02);
}
async function* fetch01() {
while (true) {
yield take('FETCH01_REQUEST');
try {
const response = await axios.get('/api/members');
// handle success
let members = response.data.data;
yield put(get01Action(members));
} catch (error) {
// handle error
console.log(error);
} finally {
// always executed
}
}
}
you can use call effect to make axios call and then you will be able to use put.
right now it's not working because you are using yield inside call back of promise.
function* fetch01() {
while (true){
try {
yield take('FETCH01_REQUEST');
const response = yield call(axios.get, '/api/members');
yield put(get01Action(response.data.data))
} catch(err) {
console.error(err)
}
}
The await does not seem to work with Redux saga. I need to wait for my API call to finish and then execute the remaining code. What happens now is that AFTER CALL gets printed before the RESPONSE which means await does not seem to work at all. I'm using async calls but not sure what needs to be done extra from the redux saga side?
async componentWillMount() {
console.log("BEFORE CALL")
await this.props.getUserCredit()
console.log("AFTER CALL")
}
mapDispatchToProps = (dispatch) => {
return {
getUserCredit: () => dispatch(getUserCredit()),
}
};
connect(null, mapDispatchToProps)(MyComponent);
Action
export const getUserCredit = () => {
return {
type: GET_USER_CREDIT,
};
};
Redux Saga
const getUserCreditRequest = async () => {
const response = await Api.get(getCreditUrl)
console.log("REPONSE!!!")
console.log(response)
return response
}
function* getUserCredits() {
try {
const response = yield call(getUserCreditRequest);
if (response.status === okStatus) {
yield put({
userCredit: response.data.userCredit
}
));
}
} catch (error) {}
}
export function* getUserCredit() {
yield takeLatest(GET_USER_CREDIT, getUserCredits);
}
export default function* rootSaga() {
yield all([fork(getUserCredit)]);
}
Normally, init / fetching takes place during componentDidMount and don't use async or await inside components. Let the saga middleware do its thing via yield.
// In your component
componentDidMount() { // not async
this.props.getUserCredit(); // dispatch `GET_USER_CREDIT` action
}
mapDispatchToProps = (dispatch) => {
return {
getUserCredit: () => dispatch(getUserCredit()),
}
};
connect(null, mapDispatchToProps)(YourComponent);
You shouldn't be using async/await pattern. As redux-saga handles it by the yield keyword. By the time call is resolved you will have the value available in response.
in actions.js, you should have an action that will carry your data to your reducer:
export function getUserCredits(userCredit) {
return {
type: types.GET_USER_CREDIT_SUCCESS,
payload: userCredit
};
}
Your saga should handle the API call like so:
function* getUserCredits() {
try {
const response = yield axios.get(getCreditUrl); <--- This should work
// No need for if here, the saga will catch an error if the previous call failed
yield put(actions.getUserCredits(response.data.userCredit));
} catch (error) {
console.log(error);
}
}
EDIT: example of using axios with redux-saga
im new to whole React env and im trying to create a GET request to Google Api using redux-saga library.
Im sort of missing 2 things. First problem is that my saga function is called again and again forever ( have no idea why ).
The second thing is how to pass the data properly to the reducer.
Here is my Saga:
function* watchAutoCompleteFetch() {
yield takeLatest(UPDATE_ZIP_AUTOCOMPLETE, requestAutoComplete);
}
function requestAutoCompleteApi() {
return fetch(
'some-url-here'
).then((response) => response.json())
.then((json) => json)
.catch((e) => {
put({type: "AUTOCOMPLETE_ZIP_FETCH_FAILED", message: e.message});
});
}
function* requestAutoComplete() {
const data = call(requestAutoCompleteApi);
yield put(updateZipAutoCompleteAction(data));
}
And reducer function:
const updateZipAutoComplete = (state, data) => {
debugger;
return state;
};
In reducer, I get the data as some sort of call object from the redux-saga, not a promise, nor the data.
Any ideas what im doing wrong?
So, turns out there was indeed 2 problems. One is that I was missing yield keyword, the second was I was calling always the same reducer, which triggered the dispatch event again and it went into loop and run forever.
The actual solutions looks like this:
function* watchAutoCompleteFetch() {
yield takeLatest(UPDATE_ZIP_AUTOCOMPLETE, requestAutoComplete);
}
function requestAutoCompleteApi() {
return fetch(
'some-url-here'
).then((response) => response.json())
.catch((e) => {
console.log(e)
});
}
function* requestAutoComplete() {
const data = yield call(requestAutoCompleteApi);
if(data.status ==="OK") {
yield put(updateZipAutoCompleteSucceedAction(data));
} else {
yield put(updateZipAutoCompleteFailedAction(data));
}
}