Edit Field not working & Managing form values using redux store - redux-form

Question

I am using redux-form v6.7.0. I referred this link and tried to load data asynchronously on button click but it is not working as expected. I used change method in componentWillReceiveProps but after using I am unable to edit that Field.

I don't know using change method is the only and appropriate way of managing with redux-form. PFB the sample code snippet where I loaded personName using change method in componentWillReceiveProps and after that I am unable to edit that Field. For personAge, the Field is working fine as I didn't used change method for it.

Also, I wanted to synchronize all changed form values with my redux store (means keep each and every change updated with my redux store).

Any help would be appreciated. Thanks in advance.

/* reducers should always maintain immutability */

function PersonInfoReducer(state = { personName: "", personAge: "" }, action) {
  switch (action.type) {
    case "SAVE_PERSON_DATA":
      return Object.assign({}, state, action.payload);
default:
      return state;
  }
}

/* save person data action */
var savePersonData = (data) => {
  return {
    type: "SAVE_PERSON_DATA",
    payload: data
  };
};

/* form sample component */
class FormSample extends React.Component {
  componentDidMount() {
    
  }

  componentWillReceiveProps(nextProps) {
    //console.log(nextProps);
    const { change } = this.props;
    //debugger;
    if(nextProps.initialValues) {
      change("personName", nextProps.initialValues.personName);
      //change("personAge", nextProps.initialValues.personAge);
    }
  }
  
  loadPersonData() {
    const { initialize, savePersonData } = this.props;

    var personInfo = {
        personName: "Abraham",
        personAge: 21
    };
    savePersonData(personInfo);
  }

  render() {
    return (
      <form>
        <ReduxForm.Field name="personName" component="input" type="text" placeholder="Person Name" />
        <ReduxForm.Field name="personAge" component="input" type="text" placeholder="Person Age" />
        <button type="button" onClick={() => this.loadPersonData()}>Load</button>
        <h5>Values:</h5>{JSON.stringify(this.props.formValues)}
      </form>
    );
  }
}

FormSample = ReduxForm.reduxForm({
    form: "FormSample", // a unique identifier for this form
})(FormSample);

const selector = ReduxForm.formValueSelector("FormSample");

function mapStateToProps(state) {
  const { personInfo } = state;

  return {
    initialValues: personInfo,
    formValues: selector(state, "personName", "personAge")
  };
}

function mapDispatchToProps(dispatch) {
  return Redux.bindActionCreators({
    savePersonData
  }, dispatch);
}

FormSample = ReactRedux.connect(mapStateToProps, mapDispatchToProps)(FormSample);


const allReducers = Redux.combineReducers({
  form: ReduxForm.reducer,
  personInfo: PersonInfoReducer
});

const store = Redux.createStore(allReducers);

ReactDOM.render(<ReactRedux.Provider store={store}><FormSample /></ReactRedux.Provider>, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.7.2/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.6/react-redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux-form/6.7.0/redux-form.min.js"></script>

<div id="root"></div>

Got an answer for editing not working. Please refer this link. Still I need answer for how to synchronize all the form changes with my redux store. — Abraham Gnanasingh
– Abraham Gnanasingh, Commented Aug 20, 2017 at 16:59

Abraham Gnanasingh · Accepted Answer · 2017-08-21 19:35:09Z

I finally ending with this solution:). PFB the code snippet.

/* form sample component */
class FormSample extends React.Component {
  componentWillReceiveProps(nextProps) {
    //const { change, initialize } = this.props;
  }
  
  loadPersonData() {
    const { initialize, savePersonData } = this.props;

    var personInfo = {
        personName: "Abraham",
        personAge: 21
    };
    savePersonData(personInfo);
  }
  
  loadAnotherData() {
    const { savePersonData } = this.props;

    var personInfo = {
        personName: "Gnanasingh",
        personAge: 23
    };
    savePersonData(personInfo);
  }
  
  submit() {
    const { formValues, savePersonData } = this.props;
  
    savePersonData(formValues);
  }

  render() {
    const { formValues, personInfo } = this.props;
  
    return (
      <form>
        <ReduxForm.Field name="personName" component="input" type="text" placeholder="Person Name" />
        <ReduxForm.Field name="personAge" component="input" type="text" placeholder="Person Age" />
        <button type="button" onClick={() => this.loadPersonData()}>Load</button>
        <button type="button" onClick={() => this.loadAnotherData()}>Load Another</button>
        <button type="button" onClick={() => this.submit()}>Submit</button>
        <h5>Form Values:</h5>{JSON.stringify(formValues, null, 2)}
        <h5>Store Values:</h5>{JSON.stringify(personInfo, null, 2)}
      </form>
    );
  }
}

FormSample = ReduxForm.reduxForm({
    form: "FormSample", // a unique identifier for this form
    enableReinitialize: true
})(FormSample);

const selector = ReduxForm.formValueSelector("FormSample");

function mapStateToProps(state) {
  const { personInfo } = state;

  return {
    initialValues: personInfo,
    formValues: selector(state, "personName", "personAge"),
    personInfo
  };
}

function mapDispatchToProps(dispatch) {
  return Redux.bindActionCreators({
    savePersonData
  }, dispatch);
}

FormSample = ReactRedux.connect(mapStateToProps, mapDispatchToProps)(FormSample);


/* reducer should always maintain immutability */

function PersonInfoReducer(state = { personName: "", personAge: "" }, action) {
  switch (action.type) {
    case "SAVE_PERSON_DATA":
    debugger;
      return Object.assign({}, state, action.payload);
    default:
      return state;
  }
}

/* save person data action */
var savePersonData = (data) => {
  return {
    type: "SAVE_PERSON_DATA",
    payload: data
  };
};

const allReducers = Redux.combineReducers({
  form: ReduxForm.reducer,
  personInfo: PersonInfoReducer
});

const store = Redux.createStore(allReducers);

ReactDOM.render(<ReactRedux.Provider store={store}><FormSample /></ReactRedux.Provider>, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.7.2/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.6/react-redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux-form/6.7.0/redux-form.min.js"></script>


<div id="root"></div>

Collectives™ on Stack Overflow

Edit Field not working & Managing form values using redux store - redux-form

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related