redux form update state and retrieve - reactjs

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: <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.

Answer 1

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!