Ido Ido - 2 months ago 23
React JSX Question

Using redux-form[v 6.0.5] getFormValues does not add values to props

I'm trying to add form values to props using getFormValues in my container. However, when I look for the values property in the derived component I get an undefined. What do I miss?

The container code:

import {reduxForm, getFormValues} from 'redux-form';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as actions from '../actions/propertiesActions';
import Properties from '../components/common/Properties';

const mapStateToProps = (state, ownProps) => {
return {
form: ownProps.id,
values: getFormValues(ownProps.id)(state)
};
};

const mapDispatchToProps = (dispatch) => {
return {
actions: bindActionCreators(actions, dispatch)
};
}

export default connect(mapStateToProps, mapDispatchToProps)(reduxForm()(Properties));


In the Properties component, calling
this.props.values
will return undefined.

What can be the problem?
Thanks,

Answer

The prop «values» is reserved key in redux form. You need try to use some another key, like «formValues».

@connect(
  (state) => ({
    formValues: getFormValues('form-name')(state) || {},
  }),
  {}
)
@reduxForm({
  form: 'form-name'
})

export default class Form extends Component {
  static propTypes = {
    ...
    formValues: PropTypes.object.isRequired,
    ...
  }

  render() {
    return (
    );
  }
}