Earlier this month I started dabbling with Redux Sagas as an alternative to Redux Thunks.
At the time I was highly skeptical – largely around whether re-writing a significant portion of my JavaScript was good use of my time, given that I had no prior experience with generators, and that conceptually sagas sounded pretty hard.
But I kept hitting issues with Thunks. They just seemed so cumbersome, and error prone. I found writing tests for them to be painful, and adding in the Redux API Middleware made that even more complicated.
Ultimately, switching to Redux Saga has been one of the highlights of my current project. I love it. Every problem I have had so far has been made easier through the use of sagas.
But today I hit on a problem I haven’t seen before:
uncaught at check call: argument [object Promise] is not a function
This is a generic version of the code I am using:
export function *doRequestProfile(action) { try { yield put({ type: types.REQUEST__STARTED, payload: { requestFrom: 'my-saga' } }); const profile = yield call(api.fetchProfile(action.payload.accountId)); yield put({ type: types.PROFILE__SUCCESSFULLY_RECEIVED, payload: { profile } }); } catch (e) { yield put({ type: types.PROFILE__FAILED_RECEIVING, payload: { message: e.message, statusCode: e.statusCode } }); } finally { yield put({ type: types.REQUEST__FINISHED, payload: { requestFrom: 'my-saga' } }); } } export function *watchRequestProfile() { yield* takeLatest(types.PROFILE__REQUESTED, doRequestProfile); }
I have highlighted the problematic line.
The issue here is that the error in the browser is fairly cryptic. It took me digging into the source code to figure this one out.
But actually the issue is really simple to fix.
The highlighted line above should be :
const profile = yield call(api.fetchProfile, action.payload.accountId);
I was calling my function myself, and then passing the promise on to the Saga… whoopsie daisy.
Thanks you! You save for me many hours.
Me too. I would have never figured that out.
Lol thanks man, this would have taken me so long to find on my own!
🙂 np, happy to help
Would have taken me too long to figure out this basic mistake, thanks.
You are the best
Thanks for posting this, saved me a headache.
Thanks. You saved me some time as well !
Additional tip: if you need to pass more than one parameter to the function, consider passing an array of arguments… 😉
Thx man.
you’re welcome 🙂
Came here to say thank you. I was still partially in thunk-mode and didn’t realize the call effect takes the function and then variables as parameters.
You’re welcome Justin 🙂 Glad I could be of help 🙂
Thank you so much !! Same problem while a half day..
Thanks, saved me unknown amount of hair.
lol, you’re welcome 🙂
THANKS!
Glad u helped me a lot stuck for longer time.
You’re welcome, glad I could help 🙂
Thank you!
You’re welcome 🙂
Wow, thanks. I was looking at that problem, totally lost and not looking forwards to doing the digging myself. Put in the error and your article popped up. Thanks!
Glad I could help 🙂
Thanks very much!
You’re welcome
Thank you very much !!
You’re welcome 🙂
Just to let you know that you save my life LoL…I also just started with saga and seeing this “fix” I remembered right way of the docs and I see how dumb I was being hahahaa
thanks!
Sooo siiimple!! Thank you so much for taking the time to write this.
Ugh. Yeah. Awesome. Thanks.
Thank you so much! I have been stuck in this error the whole day.
This error was driving me crazy. Thanks! You are awesome.
saviour
woah yo a life-saver, aye, was hanging my head for hours around this without to notice twas only a comma missing…
Thanks so much! Great fix… Saved me hours!!!
I just started to use redux-saga and I had this same issue. Thank you very much
thanks, u saved me the harssle
Wow this saved me thanks!!
Thanks, Man!
THANKS!!!
Hey, does anyone have the fix for this? The link with the fix no longer works.
Thanks
Seems they have changed the docs URL structure.
AFAIK (and I use this every day atm), the “fix” is still the same. It’s not a fix. It’s an improper method call – was never a bug in their code, rather a fault of mine.
// wrong
call(api.fetchProfile(action.payload.accountId));
// right
call(api.fetchProfile, action.payload.accountId);
// for clarity
call(yourMethod, firstParam, secondParam, thirdParam, etc);
This is still helpful in 2020. 🙂 Thanks!