Payload is undefined - reactjs

Question

I'm a PHP/Laravel mid-level developer. I'm totally a noob when it comes to react.js. Now I know that react uses API's and stuff to show data when it comes to laravel backend. I am used to traditional HTML, CSS, JS, Bootstrap, Ajax and whatsoever. I have a simple task to login a user from react through laravel backend. I'v created the APIs for that task and they're working totally fine and somehow I got lucky and attached those APIs ALL BY MYSELF (with a little research, of course). Now whenever I try to signin, I receive the usual data through an axios request to backend and have it in a variable signInUser. Now when I try to pass that data to other action function it's going undefined somehow. Here's my code so that you can understand what I'm trying to achieve:
Components\SignIn.js
constructor() {
super();
this.state = {
email: '',
password: ''
}
}
componentDidUpdate() {
if (this.props.showMessage) {
setTimeout(() => {
this.props.hideMessage();
}, 100);
}
if (this.props.authUser !== null) {
this.props.history.push('/');
}
}
render() {
const {email, password} = this.state;
const {showMessage, loader, alertMessage} = this.props;
return (
// other components and stuff...
<Button onClick={() => { this.props.showAuthLoader(); this.props.userSignIn({email, password});}} variant="contained" color="primary">
<IntlMessages id="appModule.signIn"/>
</Button>
);
}
const mapStateToProps = ({auth}) => {
const {loader, alertMessage, showMessage, authUser} = auth;
return {loader, alertMessage, showMessage, authUser}
};
export default connect(mapStateToProps, {
userSignIn,
hideMessage,
showAuthLoader
})(SignIn);
Sagas\Auth.js
const signInUserWithEmailPasswordRequest = async (email, password) =>
await axios.post('auth/login', {email: email, password: password})
.then(authUser => authUser)
.catch(err => err);
function* signInUserWithEmailPassword({payload}) {
const {email, password} = payload;
try {
const signInUser = yield call(signInUserWithEmailPasswordRequest, email, password);
if (signInUser.message) {
yield put(showAuthMessage(signInUser.message));
} else {
localStorage.setItem('user_id', signInUser.data.user.u_id);
yield put(userSignInSuccess(signInUser.data.user.u_id));
}
} catch (error) {
yield put(showAuthMessage(error));
}
}
export function* signInUser() {
yield takeEvery(SIGNIN_USER, signInUserWithEmailPassword);
}
export default function* rootSaga() {
yield all([fork(signInUser),
// couple of other functions...
);
}
actions\Auth.js
export const userSignIn = (user) => {
return {
type: SIGNIN_USER,
payload: user
};
};
export const userSignInSuccess = (authUser) => {
console.log(authUser); // It's printing undefined, I don't know why?!
return {
type: SIGNIN_USER_SUCCESS,
payload: authUser
}
};
reducers\Auth.js
const INIT_STATE = {
loader: false,
alertMessage: '',
showMessage: false,
initURL: '',
authUser: localStorage.getItem('user_id'),
};
export default (state = INIT_STATE, action) => {
switch (action.type) {
case SIGNIN_USER_SUCCESS: {
return {
...state,
loader: false,
authUser: action.payload
}
}
case INIT_URL: {
return {
...state,
initURL: action.payload
}
}
default:
return state;
}
}
P.s: It's a purchased react.js template (not my code).