How to update redux store with redux form values - reactjs

Question

i am using redux forms and redux to push form values into the store/state. First thing is, i get the state as undefined in form component when i pass it as props from container(INFORMATION COMPONENT) component which is not a React component class and finally use update function to update the store. I am new to React and the redux form is throwing me off
// App Component
class App extends Component {
constructor(props) {
super(props)
}
render() {
return (
<div className="App">
<InformationFrom state={this.props}/>
</div>
);
}
}
const mapStateToProps = (reduxState) => {
return reduxState;
}
const mapDispatchToProps = (dispatch) => {
return bindActionCreators(actionCreators, dispatch);
}
export default connect(
mapStateToProps, mapDispatchToProps
)(App)
// InformationForm Component
export default class InformationFrom extends React.Component {
render() {
return (
<div>
{console.log("infoForm props >> ", this.props)}
<SimpleForm/>
</div>
)
}
}
// Form stateless function component
const SimpleForm = props => {
const { handleSubmit, pristine, reset, submitting } = props
const state = this.props.state; // is undefined
return (
<div>
{ console.log("from state here >> ", this.props) }
<form onSubmit={handleSubmit(this.updateStore(values,state))} name="InformForm">
<div>
<div>
<Field name="firstName" component={renderInput} type="text" placeholder="First Name" label={"First Name"} />
<Field name="lastName" component={renderInput} type="text" placeholder="Last Name" label={"Last Name"} />
<Field name="email" component={renderInput} type="text" placeholder="Email" label={"Email"} />
</div>
</div>
<div style={style.normal}>
<button type="submit" disabled={submitting}>
Submit
</button>
<button type="button" disabled={submitting} onClick={reset}>
Clear Values
</button>
</div>
</form>
</div>
)
}
function updateStore(values, state){
let newStore = {};
newStore = {
}
return newStore;
}
const validate = values => {
const errors = {}
if (!values.firstName) {
errors.firstName = "Required!"
}
return errors;
}
const style = {
normal: {
margin: '10px'
}
}
export default reduxForm({
form: 'simple', // a unique identifier for this form
destroyOnUnmount: false,
validate
})(SimpleForm)

Answer 1

You are not pass props to SimpleForm in InformationFrom, so need to update
export default class InformationFrom extends React.Component {
render() {
return (
<div>
{console.log("infoForm props >> ", this.props)}
<SimpleForm/>
</div>
)
}
}
to
<SimpleForm {...this.props} />
and Export with connect to get state from redux
export default connect((state)=>state)( reduxForm({
form: 'simple', // a unique identifier for this form
destroyOnUnmount: false,
validate
})(SimpleForm) );