Redux saga "rootSaga has been cancelled"

Question

I am new to react redux. Just trying out Redux Saga and encountering some error messages that I couldnt comprehend. This is my rootSaga:

import { takeEvery } from 'redux-saga';
import { AUTH_LOAD_SUCCESS,AUTH_SIGNUP,AUTH_SIGNIN,AUTH_SIGNOUT } from '../reducers/auth';
import { receiveAuth,signUp,signIn,onSignOut } from './auth';

export default function* rootSaga(){
    yield [
        takeEvery('AUTH_LOAD_SUCCESS', receiveAuth),
        takeEvery('AUTH_SIGNUP', signUp),
        takeEvery('AUTH_SIGNOUT',onSignOut),
        takeEvery('AUTH_SIGNIN', signIn)          
]

}

SignIn and SignUp works perfectly for me but after that I get the following error messages in my console. So even though I can log in using redux-saga but I can't get SignOut to work presumably due to saga being "cancelled" as per the error messages. Can someone please explain to me what's going on? Thanks

bundle.js:79457 uncaught at check call: argument fn is undefinedlog @ bundle.js:79457
bundle.js:79457 rootSaga has been cancelled 
bundle.js:79457 uncaught at rootSaga 
 at rootSaga 
 at signIn 
 Error: call: argument fn is undefined
    at check (http://127.0.0.1:3000/dist/bundle.js:79313:12)
    at getFnCallDesc (http://127.0.0.1:3000/dist/bundle.js:80311:21)
    at call (http://127.0.0.1:3000/dist/bundle.js:80336:24)
    at signIn$ (http://127.0.0.1:3000/dist/bundle.js:81213:47)
    at tryCatch (http://127.0.0.1:3000/dist/bundle.js:7893:41)
    at GeneratorFunctionPrototype.invoke [as _invoke] (http://127.0.0.1:3000/dist/bundle.js:8167:23)
    at GeneratorFunctionPrototype.prototype.(anonymous function) [as next] (http://127.0.0.1:3000/dist/bundle.js:7926:22)
    at next (http://127.0.0.1:3000/dist/bundle.js:79727:28)
    at currCb (http://127.0.0.1:3000/dist/bundle.js:79801:8)
    at http://127.0.0.1:3000/dist/bundle.js:79904:17

Extra info:

sagas/auth.js
import 'babel-polyfill';
import fetch from 'isomorphic-fetch'
import { browserHistory } from 'react-router';
import cookie from 'react-cookie';
import { put,call,select } from 'redux-saga/effects';
import { requestSignUp,requestSignIn,requestSignOut,receiveUser,receiveSignIn,receiveSignOut } from '../reducers/auth'



export function* onSignOut(){

/////////////////ignore this for the moment///////
 console.log("ffss")

}

export function* receiveAuth() {
    const user = cookie.load('username');

    yield put(receiveAuth(user));
    }

export function* signUp(action) {
    yield put(requestSignUp())
    try {
        const response = yield call(fetch,'/api/sign_up', {
                    method:'POST',
                    headers:{'Accept': 'application/json', 'Content-Type': 'application/json'},
                    body: JSON.stringify(action.payload)  /////action.payload contains {username:'aa',password:'aa'}
                    })
        if(response.ok){
            yield call(cookie.save,'username', action.payload.username)
            yield put(receiveUser(action.payload.username))
            yield call(browserHistory.push('/chat'))
        }
    } catch (err){
        throw err
      }       
}

export function* signIn(action) { console.log("hi")
    yield put(requestSignIn())
    try {

        const response = yield call(fetch,'/api/sign_in', {
                method:'POST',
                headers:{'Accept': 'application/json', 'Content-Type': 'application/json'},
                body: JSON.stringify(action.payload)  /////action.payload contains {username:'aa',password:'aa'}
                })


        if(response.ok){
             yield call(cookie.save,'username',action.payload.username)
            yield put(receiveSignIn(action.payload))
            yield call(browserHistory.push('/chat'))
        }
    } catch (err){
        throw err
      }
}

I think I am expected to put in a second argument to call but when I coded null ie yield call(browserHistory.push('/chat'),null) I still get the errors

uncaught at signIn call: argument fn is undefined
uncaught at check call: argument fn is undefined

Also, my receiveAuth is returning this msg:

uncaught at rootSaga 
 at rootSaga 
 at receiveAuth 
 Error: Actions must be plain objects. Use custom middleware for async actions.

Anosmia

Can you post the code for the signIn saga? it looks like that is where the exception is being thrown – Ejector

Answer 1

The error comes from a yield call(somefunc, ...) you have inside the signIn saga. It says that someFunc ( whatever name it has in your code) is undefined. So you should check if you havent mispelled the function name or maybe omitted to export it from its defining module

EDIT

I noticed that you call the browserHistory.push function like this

yield call(browserHistory.push('/chat'),null)

You should not call the function yourself but provide the function itself along with the arguments (and eventually the this context) to the saga

yield apply(browserHistory, browserHistory.push, ['/chat'])   

I'm using the apply Effect which allows calling methods with a this context (context is provided as a 1st argument)

Harlequinade

There are two calls that could be causing the problem. Please see extra info I added. Could you please tell me how they should be corrected? – Anosmia

Works perfectly, thanks! BTW I see you are a fan of Naruto – Anosmia

@YassineElouafi I wanted to know that has apply method been removed? Because I can't find it in the documentation – Electrojet

github.com/redux-saga/redux-saga/tree/master/docs/… – Harlequinade