How to update redux store with redux form values

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)

Birbal Singh Birbal Singh · Accepted Answer · 2018-05-02T06:05:34

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) );

How to update redux store with redux form values

1 Answers