Search code examples
javascriptreactjsreduxredux-saga

Redux-saga isn't waiting for api calls to resolve, keeps returning promises. How do I make "yeild call" wait for on api calls?


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.


Solution

  • 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);
    }