Failing to integrate Redux-saga with Redux - reactjs

Question

I am trying to use Redux-saga for the first time, so I have the following sagas file:
backendAuth.js
import {all, call, fork, put, takeEvery} from "redux-saga/effects";
import {auth} from 'backend/backend';
import {
SIGNIN_USER,
SIGNOUT_USER,
SIGNUP_USER
} from "constants/ActionTypes";
import {showAuthMessage, userSignInSuccess, userSignOutSuccess, userSignUpSuccess} from "actions/Auth";
const createUserWithUsernamePasswordRequest = async (username, password) =>
await auth.createUserWithUsernameAndPassword(username, password)
.then(authUser => {
console.log('authUser: '+authUser);
return authUser;
})
.catch(error => error);
const signInUserWithUsernamePasswordRequest = async (username, password) =>
await auth.signInWithUsernameAndPassword(username, password)
.then(authUser => authUser)
.catch(error => error);
const signOutRequest = async () =>
await auth.signOut()
.then(authUser => authUser)
.catch(error => error);
function* createUserWithUsernamePassword({payload}) {
const {username, email, password} = payload;
try {
const signUpUser = yield call(createUserWithUsernamePasswordRequest, username, email, password);
if (signUpUser.message) {
yield put(showAuthMessage(signUpUser.message));
} else {
localStorage.setItem('user_id', signUpUser.user.uid);
yield put(userSignUpSuccess(signUpUser.user.uid));
}
} catch (error) {
yield put(showAuthMessage(error));
}
}
function* signInUserWithUsernamePassword({payload}) {
const {username, password} = payload;
try {
const signInUser = yield call(signInUserWithUsernamePasswordRequest, username, password);
if (signInUser.message) {
yield put(showAuthMessage(signInUser.message));
} else {
localStorage.setItem('user_id', signInUser.user.uid);
yield put(userSignInSuccess(signInUser.user.uid));
}
} catch (error) {
yield put(showAuthMessage(error));
}
}
function* signOut() {
try {
const signOutUser = yield call(signOutRequest);
if (signOutUser === undefined) {
localStorage.removeItem('user_id');
yield put(userSignOutSuccess(signOutUser));
} else {
yield put(showAuthMessage(signOutUser.message));
}
} catch (error) {
yield put(showAuthMessage(error));
}
}
export function* createUserAccount() {
yield takeEvery(SIGNUP_USER, createUserWithUsernamePassword);
}
export function* signInUser() {
yield takeEvery(SIGNIN_USER, signInUserWithUsernamePassword);
}
export function* signOutUser() {
yield takeEvery(SIGNOUT_USER, signOut);
}
export default function* rootSaga() {
yield all([
fork(signInUser),
fork(createUserAccount),
fork(signOutUser)
]);
}
And this is the file where the asynchronous consult to an api is performed:
backend.js
import axios from 'axios';
const backendServer = 'http://localhost:8000/';
const signInEndpoint = backendServer + 'api/token_auth/';
const signInWithUsernameAndPassword = (username, password) => {
axios.post(backendServer+"api/token_auth/", {
username: username,
password: password
})
.then(Response => {
console.log('Response: '+Response)
return Response;
})
.catch(Error => Error);
}
export const auth = {
signInWithUsernameAndPassword: signInWithUsernameAndPassword
}
The ajax is well executed through axios, and the console.log() in backend.js is reached, but the console.log() in backendAuth is not, and I get the following error in the console:
index.js:1375 Invariant Violation: Objects are not valid as a React child (found: TypeError: Cannot read property 'then' of undefined). If you meant to render a collection of children, use an array instead.
I believe the problem lies in the way I am defining the return of the value of the then in the ajax of backend.js, but I am pretty new to frontend development, so I am not sure about it.

Answer 1

The root cause is a simple fix - you are using an explicit block for the body of your signInWithUsernameAndPassword arrow function, so you need to use an explicit return. Since you have no return statement that function returns undefined which is cascading to cause the overall issue.
The quick fix is just to update the function to:
const signInWithUsernameAndPassword = (username, password) => {
return axios.post(backendServer+"api/token_auth/", {
username: username,
password: password
})
.then(Response => {
console.log('Response: '+Response)
return Response;
})
.catch(Error => Error);
}
Now to understand the final error you're seeing due at the moment: since signInWithUsernameAndPassword returns undefined, you eventually enter the catch block of signInWithUsernamePassword in backendAuth.js due to the type error of calling undefined.then in signInUserWithUsernamePasswordRequest. The error in that catch block is an Error instance, not a plain string. I'm assume you're then displaying the error that is passed to showAuthError somewhere in a react component tree, but an Error instance is not something that is valid to be rendered. You could try calling toString() on it first to display future errors instead of causing a rendering error.