ThomasThiebaud ThomasThiebaud - 1 month ago 23
React JSX Question

Redux-form redirect to unknown url

I'm trying to create a form using redux-form and use it in a project based on react-redux-starter-kit

Here is my container

import { connect } from 'react-redux'
import { loginUser, logoutUser } from '../modules/login'

import Login from '../components/Login'

const mapDispatchToProps = {
loginUser,
logoutUser,
};

const mapStateToProps = state => ({
errorMessage: state.errorMessage,
});

export default connect(mapStateToProps, mapDispatchToProps)(Login)


and here is the form

import React, { PropTypes } from 'react';
import { Input, Button, Card, CardText, CardTitle } from 'react-toolbox';
import { Field, reduxForm } from 'redux-form';

const Login = props => (
<form onSubmit={props.loginUser}>
<div>
<label htmlFor="email">Email</label>
<Field name="email" component="input" type="email"/>
</div>
<div>
<label htmlFor="password">Password</label>
<Field name="password" component="input" type="password"/>
</div>
<button type="submit">Submit</button>
</form>
);

export default reduxForm({ form: 'login' })(Login);


The
loginUser
function looks like

export function loginUser(creds) {
const config = {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
email: creds.email,
password: creds.password,
}),
};

return (dispatch) => {
dispatch(requestLogin(creds))

return fetch('http://localhost:3001/auth/login', config)
.then(response => response.json().then(user => ({ user, response })))
.then(({ user, response }) => {
if (user.errors) {
const errors = user.errors.map(error => error.detail);
dispatch(loginError(errors))
return Promise.reject(loginError(errors));
}
dispatch(receiveLogin(user));
})
.catch(err => console.log('Error: ', err));
};
}


This function is called but I'm redirect to

http://localhost:3000/login?email=test%40test.com&password=test


and I cannot find why. Do you have any idea ?




Here are the actions

function requestLogin(creds) {
return {
type: LOGIN_REQUEST,
isFetching: true,
isAuthenticated: false,
creds,
};
}

function receiveLogin(user) {
return {
type: LOGIN_SUCCESS,
isFetching: false,
isAuthenticated: true,
id_token: user.id_token,
};
}

function loginError(message) {
return {
type: LOGIN_FAILURE,
isFetching: false,
isAuthenticated: false,
message,
};
}

Answer

Modify your form onSubmit as-

 <form onSubmit={props.handleSubmit(props.loginUser)}>    
    </form>