How to export mapStateToProps and Redux Form? - reactjs

Question

I'm using Redux Form (ver. 6) for a log in page. What I would like to do is when the user fills out the form and clicks submit, grab the text from my state so that I can eventually dispatch an action with that email and password. However, I'm having trouble with exporting this component while using both connect from react-redux and Redux Form.
Using react-redux, connect wants to be exported like so when mapping state to props:
export default connect(mapStateToProps)(LogInForm)
However, Redux Form wants it's export set up like this:
export default reduxForm({
form: 'LogInForm',
validate,
})(LogInForm);
Is there a way to combine these two? I'd tried something like:
const reduxFormConfig = reduxForm({
form: 'LogInForm',
validate,
});
export default connect(mapStateToProps)(ReduxFormConfig)(LogInForm)
but it did not work.
Or Perhaps that's a better approach to handling this? Here is the full code from within my component:
import React from 'react';
import { connect } from 'react-redux';
import { Field, reduxForm } from 'redux-form';
import InputField from '../InputField';
import { validateLogInSignUp as validate } from '../../utils/validateForms.js';
const LogInForm = (props) => {
const {
handleSubmit,
pristine,
submitting,
} = props;
return (
<div>
<form onSubmit={handleSubmit}>
<Field
name="email"
type="email"
component={InputField}
label="email"
/>
<Field
name="password"
type="password"
component={InputField}
label="password"
/>
<div>
<button type="submit" disabled={submitting}>Submit</button>
</div>
</form>
</div>
);
};
const mapStateToProps = state => {
return {
loginInput: state.form,
};
};
// export default connect(mapStateToProps)(LogInForm)
// export default reduxForm({
// form: 'LogInForm',
// validate,
// })(LogInForm);
Any and all help is much appreciated. Thanks!

Answer 1

There still a way to combine these two in reduxForm v6:
reduxForm({
form: 'LogInForm',
validate,
})(LogInForm);
export default connect(mapStateToProps)(LogInForm)
Here is how:
import React, { Component } from 'react';
import { connect } from 'react-redux
class LogInForm extends Component {
...
}
function mapStateToProps(state) {
return { ... }
}
function mapDispatchToProps(dispatch) {
return { ... }
}
// First decorate your component with reduxForm
LogInForm = reduxForm({
form: 'LogInForm',
validate,
})(LogInForm);
// Then connect the whole with the redux store
export default connect(mapStateToProps, maDispatchToProps)(LogInForm)

Answer 2

Using redux-form you shouldn't need to access the state directly in your LoginForm. Instead, you should access the values in your parent component when the form is submitted:
// LoginForm.js
const LogInForm = (props) => {
...
};
export default reduxForm({
form: 'LogInForm',
validate,
})(LogInForm);
// Parent.js
import LoginForm from './LoginForm';
const handleSubmit = (values) => {
alert(JSON.stringify(values)); // { email: 'foo#bar.com', password: '1forest1' }
};
const Parent = (props) => {
return (
<LoginForm onSubmit={ handleSubmit } />
);
};
See https://github.com/erikras/redux-form/blob/master/examples/simple/src/index.js#L42 for a more complete example of a simple form.

Answer 3

You can try this :
import React from 'react';
import { connect } from 'react-redux' ;
import { reduxForm } from 'redux-form';
class Example extends React.Component {
...
}
function mapStateToProps(state) {
return { ... }
}
function mapDispatchToProps(dispatch) {
return { ... }
}
export default connect(mapStateToProps, mapDispatchToProps)(reduxForm({
form: 'formname',
validate
})(Example));

Answer 4

There are multiple threads with same issue. I recently posted my take with my solution here but with a few variations.
I used a class based component than a function based. I have found guides to specifically implement that way and explaining that the connect method of react-redux make it a Higher Order Component and as such it is best used with a class instance.
As mentioned by #doncredas, reduxForm and react-redux's connect method should be implemented separately, however, my implementation is as follows:
function mapStateToProps(state) {
return { form: state.form };
}
Signin = connect(mapStateToProps, actions)(Signin);
Signin = reduxForm({
form: 'signin'
})(Signin);
export default Signin;
[Added later] Another variation can be:
const form = reduxForm({ form: 'signin' });
export default connect(mapStateToProps, actions)(form(Signin));