How to access redux form values in another component

Question

I using Redux-Form 7.3.0. I am trying to get the values of my form in another component. I read the instruction at the website of Redux form but didn't work.

this is the code of my componenet:

    import React from 'react'
    import { Field, reduxForm } from 'redux-form';
    import { connect } from 'react-redux';
    import { formValueSelector } from 'redux-form';

    class Test extends React.Component {
      render() {
        console.log(this.props);
        return (
          <div>
            test
            {this.props.title}      
          </div>
        );
      }
    }

    const selector = formValueSelector('NewPostForm');

    Test = connect(
      state => ({
        title: selector(state, 'title')
      })
    )(Test)

    export default Test;

This is my form component:

import React from 'react'; import { Field, reduxForm } from 'redux-form';

class NewPost extends React.Component {

    renderField(field) {          
        return (
            <div>
                <label>{field.label}</label>
                <input type="text"  {...field.input} />
            </div>
        );
    }

    showResults(values) {

        window.alert(`You submitted:\n\n${JSON.stringify(values, null, 2)}`);
    }

    render() {

        const { pristine, submitting, handleSubmit } = this.props;
        return (
            <form onSubmit={handleSubmit(this.showResults)} >
                <div>
                    <Field
                        label='Title'
                        name='title'
                        component={this.renderField}
                    />

                    <button type='submit' disabled={submitting}>
                        Submit the from :)
                    </button>                        
                </div>
            </form>
        );
    }
}



export default reduxForm({ form: 'NewPostForm'})(NewPost);

but I always get

title:undefined

I found the same question here but it did not help me.

Answer 1

Your Test component has two imports from "redux-form". Please make it just one, like this:

import { Field, reduxForm, formValueSelector } from 'redux-form'

If your NewPost component gets unmounted at any moment, maybe by changing view or something during a navigation, the state of the form gets destroyed. You can avoid such default behavior by adding destroyOnUnmount attribute with a false value to your reduxForm wrapper:

export default reduxForm({
   form: 'NewPostForm',
   destroyOnUnmount: false
})(NewPost)

If this doesn't help you, please provide a better context of how you're using your components.

UPDATE: I made an example where I define 4 components:

• NewPost.js: It's the form connected to the store with redux-form.
• ShowPost.js: Shows what was captured (the post) by the form when you hit the submit button. This data is set to the NewPost internal state, and then it's passed as prop.
• ShowPostFromSelector.js: Shows what is being captured by the form, this due to the use of the selector formValueSelector.
• App.js: It's the container of the 3 components above, where the onSubmit function is defined.

Here it is: https://codesandbox.io/s/w06kn56wqk