Search code examples
javascriptreactjsreduxreact-reduxredux-form

React - Difference between two statements with reduxForm


I have checked sample code of reduxForm with initialized value, the only difference between their code and my code is the following chunk of code..

My Code (Doesn't work with initialValues)

function mapStateToProps(state) {
  return{
    initialValues: state.account.data
  };
}

export default reduxForm({
  form:'initializeFromState'
})(connect(mapStateToProps,{load: loadAccount})(InitializeFromStateForm));

Their code (Works with InitialValues) Taken from here

InitializeFromStateForm = reduxForm({
  form: 'initializeFromState', // a unique identifier for this form
})(InitializeFromStateForm);

// You have to connect() to any reducers that you wish to connect to yourself
InitializeFromStateForm = connect(
  state => ({
    initialValues: state.account.data, // pull initial values from account reducer
  }),
  { load: loadAccount }, // bind account loading action creator
)(InitializeFromStateForm);

export default InitializeFromStateForm;

I changed their code for connect() and reduxForm with mine, interestingly the initialValues stopped working, now my question is are both the code different? if different what is wrong in my code?

Thanks.


Solution

  • Yeah there is a slight difference, you are wrapping the component with connect and then with ReduxForm, However it should be the other way round

    Change your code to

    export default connect(mapStateToProps,{load: loadAccount})(reduxForm({
      form:'initializeFromState'
    })(InitializeFromStateForm));
    

    and it should work