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.
