Where I'm making the API request:
function* search(value){
// return new Promise(async (resolve, reject)=>{
// try {
// const res = await axios.get(`https://www.breakingbadapi.com/api/characters?name=${value}`)
// console.log(res.data)
// resolve(res.data)
// } catch (error) {
// reject(error)
// }
// })
return axios.get(`https://www.breakingbadapi.com/api/characters?name=${value}`)
.then(res=>{
console.log(res.data)
})
.catch(err=>{
// console.log(err)
})
}
Where I'm calling this function to get the result and put it in state:
function* startSearch(value){
try {
yield put({type:'loading'})
const person = yield call(search, value)
console.log("SAGA",person)
yield put({type:'success', payload:person})
} catch (error) {
yield put({type:'failure'})
}
}
As you can see I've tried wrapping the api call in a promise and in typical .then .catch. No matter what I keep console logging a promise and no kind of object is stored in state as intended. according to the docs yield call is supposed to pause the generator if it returns a promise but that doesn't seem to happen.
Edit:This is why you need to step away from the screen folks. All I needed to do was remove the "*" from the search function. Super easy.
Deceptively simple. All you need to do is wrap the promise generating function call in its own function which you can then call with Redux-Saga's call()
.
I think you just need to make your search
function a regular function rather than a generator function. (Remove the *
)
function search(url) {
return axios({ url })
.then(response => response.data)
.catch(err => {
log.error(err);
});
}
function* startSearch() {
const response = yield call(search, downloadURL);
}