action function is not being executed - reactjs

Question

I have an action to login user using axios post request. but the action function is not being called on clicking login button in my functional component.
here is the action function
import {
SET_USER,
SET_ERRORS,
CLEAR_ERRORS,
LOADING_UI,
SET_AUTHENTICATED,
SET_UNAUTHENTICATED
} from "../types";
import axios from "axios";
export const loginUser = (userData) => (dispatch) => {
dispatch({ type: LOADING_UI });
axios
.post("/api/auth/login", userData)
.then((res) => {
const FBIdToken = `Bearer ${res.data.token}`;
localStorage.setItem("FBIdToken", FBIdToken);
axios.defaults.headers.common["Authorization"] = FBIdToken;
dispatch(getUserData());
dispatch({ type: CLEAR_ERRORS });
window.location = "/";
})
.catch((err) => {
dispatch({
type: SET_ERRORS,
payload: err.response.data
});
});
};
export const getUserData = () => (dispatch) => {
axios
.get("/api/user")
.then((res) => {
dispatch({
type: SET_USER,
payload: res.data
});
})
.catch((err) => console.log(err));
};
and here is my functional component.
i have logged statements before and after the function call, both are being printed but the function is not being executed
import React, { useState } from "react";
import PropTypes from "prop-types";
import AppIcon from "../images/icon.png";
import axios from "axios";
import { Link } from "react-router-dom";
//MUI imports
import withStyles from "#material-ui/core/styles/withStyles";
import Grid from "#material-ui/core/Grid";
import Typography from "#material-ui/core/Typography";
import TextField from "#material-ui/core/TextField";
import Button from "#material-ui/core/Button";
import CircularProgress from "#material-ui/core/CircularProgress";
//Redux
import { connect } from "react-redux";
import { loginUser } from "../Redux/actions/userActions";
const styles = {
form: {
textAlign: "center"
},
image: {
margin: "20px auto 20px auto"
},
pageTitle: {
margin: "10px auto"
},
textField: {
margin: "10px auto"
},
button: {
marginTop: 20,
position: "relative"
},
customError: {
color: "red"
},
progress: {
position: "absolute"
}
};
function Login({ classes, UI: { loading } }) {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [errors, setErrors] = useState({});
const handleSubmit = (e) => {
e.preventDefault();
const userData = {
email: email,
password: password
};
console.log("before");
loginUser(userData);
console.log("after");
};
return (
<Grid container className={classes.form}>
<Grid item sm />
<Grid item sm>
<img src={AppIcon} alt="app logo" className={classes.image} />
<Typography variant="h2" className={classes.pageTitle}>
Login
</Typography>
<form noValidate onSubmit={handleSubmit}>
<TextField
id="email"
name="Email"
type="email"
label="Email"
className={classes.textField}
helperText={errors.email}
error={errors.email ? true : false}
value={email}
onChange={(e) => setEmail(e.target.value)}
fullWidth
/>
<TextField
id="password"
name="password"
type="password"
label="Password"
className={classes.textField}
helperText={errors.password}
error={errors.password ? true : false}
value={password}
onChange={(e) => setPassword(e.target.value)}
fullWidth
/>
{errors.error && (
<Typography variant="body2" className={classes.customError}>
Wrong credentials, please try again.
</Typography>
)}
<Button
type="submit"
variant="contained"
color="primary"
className={classes.button}
disabled={loading}
>
Login
{loading && (
<CircularProgress size={30} className={classes.progress} />
)}
</Button>
<br />
<small>
don't have an account? Signup <Link to="/signup">here</Link>
</small>
</form>
</Grid>
<Grid item sm />
</Grid>
);
}
Login.propTypes = {
classes: PropTypes.object.isRequired,
loginUser: PropTypes.func.isRequired,
user: PropTypes.object.isRequired,
UI: PropTypes.object.isRequired
};
const mapStateToProps = (state) => ({
user: state.user,
UI: state.UI
});
const mapActionsToProps = {
loginUser
};
export default connect(
mapStateToProps,
mapActionsToProps
)(withStyles(styles)(Login));

Answer 1

You should execute the loginUser passed via props, not the one you import at the top of the file, better give it a different name to avoid confusion.
e.g.
function Login({ classes, UI: { loading }, loginUser }) {