Load Data Asynchronously not working using redux-form

Question

I am trying to load data to form asynchronously using redux-form v6.7.0, but it is not working. I referred this link. Below is my sample code. Any help would be appreciated. Thanks in advance.

/* reducers should always maintain immutability */

var personInfo = {
  name: "",
  age: ""
};

function PersonInfoReducer(state = personInfo, 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() {
    const { initialize, savePersonData } = this.props;

    setTimeout(() => {
      var personInfo = {
        name: "Abraham",
        age: 21
      };
      savePersonData(personInfo);
    }, 3000);

  }

  componentWillReceiveProps(nextProps) {
    //console.log(nextProps);
    //debugger;
    //this.props.change("personName", nextProps.personInfo.name);
    //this.props.change("personAge", nextProps.personInfo.age);
  }

  render() {
    return (
      <form>
        <ReduxForm.Field name={"personName"} component="input" type="text" />
        <ReduxForm.Field name={"personAge"} component="input" type="text" />
        <h4>Values: </h4>{JSON.stringify(this.props.personInfo)}
      </form>
    );
  }
}

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

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

  return {
    initialValues: personInfo,
    personInfo: personInfo
  };
}

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

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


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

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>

What's the error message ? Do you even have any errors there ? — marpme, Aug 18 '17 at 19:01
You need to update the redux-form state to update the field value, you can do that dynamically. See this answer, https://stackoverflow.com/questions/45230531/how-to-programatically-set-redux-form-field-value/45231071#45231071 Set the value in componentWillReceiveProps — Shubham Khatri, Aug 18 '17 at 19:20
@ShubhamKhatri Can you give me a sample piece of code for this `redux` store management on `redux-form`? — Abraham Gnanasingh, Aug 18 '17 at 19:36
Redux form manages its own state in the store, you need to change its value based on the data that you get in componentDidMount function, so all you need to do is in the componentWillReceiveProps function check whether the props changed and if yes make use of change function to update the Field value — Shubham Khatri, Aug 19 '17 at 04:53
Ok. What if i have multiple `Field`s? Do I need to use `change` function for each `Field`? — Abraham Gnanasingh, Aug 19 '17 at 08:27

score 1 · Accepted Answer · answered Aug 20 '17 at 15:37

1

You need to set enableReinitialize to true when calling Redux Form higher order component, so that it updates the initial values when it receives new props from the Redux state:

FormSample = ReduxForm.reduxForm({
  form: 'FormSample',
  enableReinitialize: true
})(FormSample);

See http://redux-form.com/6.0.2/examples/initializeFromState/

answered Aug 20 '17 at 15:37

Matteo Frana

567
4
11

Thanks man, it worked perfectly well! I have another question for you. After editing/reinitializing form values, I wanted to synchronize all form values with my `redux` store (means keeps each and every change updated with the store). FYI, I have separate [question](https://stackoverflow.com/questions/45779128/edit-field-not-working-managing-form-values-using-redux-store-redux-form) posted for this. Can you help me with this? Thanks in advance. – Abraham Gnanasingh Aug 20 '17 at 16:45
Ya I was little confused when I posted that question. After that, I tried with the solution given by you in this post, it worked. Thanks man for your time! You saved my time. – Abraham Gnanasingh Aug 22 '17 at 11:09

Load Data Asynchronously not working using redux-form

1 Answers1

Linked