expensive api call with axios blocks touchables but not with fetch in react native and redux-saga

Viewed 256

I am using redux saga to handle api calls in a react native application. This is how the sagas are set up when using axios:

function* getList(){
    try{
        response = yield call(axios.get,'https://example.com/list');
        yield put({type:'LIST_RESULTS',data:response.data});
    } catch(err){
        console.log(err);
    }
}
...
function* rootSaga(){
    yield takeLatest(types.GET_LIST,getList);
    ...
}

The call fetches data of about 700kbs. When this action is dispatched, none of the touchables are responsive and as soon as the response is received, all the events called when the request was in progress are fired in batch.

The same api request when used with fetch does not have the same problem. Here is the code when using fetch

function* getList(){
    try{
        response = yield call(fetch,'https://example.com');
        data = yield call(getJson,response);
        yield put({type:'LIST_RESULTS',data});
    } catch(err){
        console.log(err);
    }
}
async function getJson(data){
    return new Promise((resolve,reject)=>{
        data.json().then(result=>{
            resolve(result);
        }).catch(err=>{
            reject(err);
        });
    });
}

Can anyone help me debug whats the issue here ?

0 Answers
Related