Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Redux saga "rootSaga has been cancelled"

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.
like image 430
mtangula Avatar asked Aug 27 '16 16:08

mtangula


People also ask

Is Redux saga deprecated?

Such a powerful & elegant tool as Redux-Saga, a Redux side effect manager, is said to be deprecated, and no longer being maintained, starting from Jan 27, 2021.

Is Redux and Redux saga same?

Redux-Saga is one of the popular middleware libraries for Redux. It makes working with asynchronous operations and side effects a lot easier. Unlike other libraries like Redux Thunk, Redux-Saga uses ES6 generators. Therefore, you should be knowledgeable in ES6 generators to implement Sagas correctly.

What is takeLatest in Redux saga?

takeLatest(pattern, saga, ... And automatically cancels any previous saga task started previously if it's still running. Each time an action is dispatched to the store.

What are Redux saga side effects?

redux-saga is a library that aims to make application side effects (i.e. asynchronous things like data fetching and impure things like accessing the browser cache) easier to manage, more efficient to execute, easy to test, and better at handling failures.


1 Answers

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)

like image 174
Yassine Elouafi Avatar answered Sep 28 '22 03:09

Yassine Elouafi