react-redux problem with onSubmit and async action on API call - reactjs

Question

I am just taking my first steps with react and redux.
I started the project first without redux and now I have decided to implement it with redux.
The login worked before I adapted it to redux.
ThunkMiddleware is applied
Now the problem:
When I click the login button, the logger or DevTools only shows LOGIN_FAILURE. The page reloads and displays the login again.
If I change this
onSubmit={() => props.login(username, password)}
to this
onSubmit={props.login(username, password)}
LOGIN_REQEST actions are spammed and finally (if the password is stored in the browser) LOGIN_SUCCESS. I get the actual content with correct data from the server.
What do I have to change to make the login work normally?
Thanks for your help
LoginComponent:
function Login(props) {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
return (
<div>
<form onSubmit={() => props.login(username, password)}>
<TextField
onChange={e => setUsername(e.target.value)}
/>
<br/>
<TextField
onChange={e => setPassword(e.target.value)}
/>
<br/>
<Button type="submit">
Login
</Button>
</form>
</div>);
}
const mapDispatchToProps = dispatch => {
return {
login: (username, password) => dispatch(login(username, password))
}
};
export default connect(
null,
mapDispatchToProps
)(Login)
LoginAction
import {
LOGIN_FAILURE,
LOGIN_REQUEST,
LOGIN_SUCCESS
} from "./LoginTypes";
export const login = (username = '', password = '') => {
return (dispatch) => {
dispatch(loginRequest());
axios.post(`server`, {
//data
}).then(
(res) => {
dispatch(loginSuccess(res));
},
(err) => {
dispatch(loginFailure(err.message));
}
);
}
};
export const loginRequest = () =>{
return {
type: LOGIN_REQUEST
}
};
export const loginSuccess = tabs =>{
return {
type: LOGIN_SUCCESS,
payload: tabs
}
};
export const loginFailure = error =>{
return {
type: LOGIN_FAILURE,
payload: error
}
};
LoginReducer:
const LoginReducer = (state = initialState, action) => {
switch (action.type){
case LOGIN_REQUEST:
return {
...state,
loading: true
};
case LOGIN_SUCCESS:
let tabBars = populateArray1(action.payload);
let navIcons = populateArray2();
return{
...state,
loading: false,
tabBars: tabBars,
navIcons: navIcons,
isLoggedIn: true
};
case LOGIN_FAILURE:
return{
...state,
loading: false,
error: action.payload
};
default: return state;
}
};
component, which controls login and content:
function Main(props) {
if(props.auth){
return(
<NotLogin />
)
}
else{
return <Login />
}
}

Answer 1

Your login page is getting refresh/redirecting due to which its not handling the api request & its response properly. Please try this by updating your login component.
function Login(props) {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const handleLogin = (event) => {
event.preventDefault()
props.login(username, password);
}
return (
<div>
<form onSubmit={handleLogin}>
<TextField
onChange={e => setUsername(e.target.value)}
/>
<br/>
<TextField
onChange={e => setPassword(e.target.value)}
/>
<br/>
<Button type="submit">
Login
</Button>
</form>
</div>);
}
After updating that, please make sure that you are getting correct value in props.auth through redux in your Main component. The Main component should have redux connection with redux auth state in your code.