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.
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.
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.
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.
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.
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)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With