redux form update state and retrieve

Question

I have 2 redux form components, first one is LoginFormComponent which is a redux-form with form name 'submitValidation'

LoginFormComponent = reduxForm({
  form: 'submitValidation'
})(LoginFormComponent)

This form component has input field like so:-

<Field name="userid" size="22" placeholder="Personal ID" 
maxLength="22" component="input" type="text"/>

On form submit, I want to navigate to the second redux form component which is VerifyLoginBodyComponent and would like to show the submitted "userid" from the first component inside a div like so:-

<div className="tieringElement">
       You are logging in as:&nbsp;&nbsp;<b>{userid}</b>
</div>

This is how I handle submit in the first form component

    class LoginFormComponent extends Component {
            constructor(props){
                super(props);
                this.submit=this.submit.bind(this);
            }
            submit(values) {
                console.log(JSON.stringify(values));
                this.context.router.push('/verify');

            }
           render(){
             const { handleSubmit } = this.props
             return(
               <form onSubmit={handleSubmit(this.submit)} id="loginform">
                 <Field name="userid" size="22" placeholder="Personal ID" maxLength="22" component="input" type="text"/>
              </form>
            )
    }

LoginFormComponent = reduxForm({
  form: 'submitValidation'
})(LoginFormComponent)

export default LoginFormComponent;

This is my redux store:

const INITIAL_APP_STATE = {
    form: {
        submitValidation: {
            userid: ''
        }
    }
};

How can I access the submitted userid from LoginFormComponent inside VerifyLoginBodyComponent?

I checked https://redux-form.com/6.5.0/examples/selectingFormValues/, Redux-form handleSubmit: How to access store state? and redux-form : How to display form values on another component, but still unable to display the userid in second form component.

Please provide any suggestions.

score 0 · Answer 1 · answered Feb 07 '17 at 01:30

0

redux-form provides formValueSelector that you can use to create a selector that retrieves form values from the redux store. You can sue that in the mapStateToProps -function of your VerifyLoginBodyComponent.

Example:

const selector = formValueSelector('submitValidation')

const mapStateToProps = reducers => {
  const signingInUserId = selector(reducers, 'userid')
  return { signingInUserId }
}

This depends of course on the fact that the form values are not cleared from the store until after submitting succeeds.

Hope this helps!

answered Feb 07 '17 at 01:30

jakee

18,486
3
37
42

Thanks for the suggestion @jakee. I tried it, but didn't work. Instead of "reducers" in your code, I tried "state" also, but that too didn't work. I had to use the traditional mapDispatchToProps => dispatch an action => reducer and update state, to make it work. I am wondering redux-form must have some benefits that will allow me to reduce the coding. – abhi Feb 07 '17 at 17:55
@jakee- is there a way to make sure, form values are not cleared from the store until submission succeeds ? – abhi Feb 07 '17 at 18:16
What I meant is that I am fairly sure that the values stay in the store until submission succeeds, unless you unmount the form. – jakee Feb 07 '17 at 18:45

redux form update state and retrieve

1 Answers1