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
– marpme, Commented Aug 18, 2017 at 19:01
You need to update the redux-form state to update the field value, you can do that dynamically. See this answer, stackoverflow.com/questions/45230531/… Set the value in componentWillReceiveProps — Shubham Khatri
– Shubham Khatri, Commented Aug 18, 2017 at 19:20
@ShubhamKhatri Can you give me a sample piece of code for this redux store management on redux-form? — Abraham Gnanasingh
– Abraham Gnanasingh, Commented Aug 18, 2017 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
– Shubham Khatri, Commented Aug 19, 2017 at 4:53

Matteo Frana · Accepted Answer · 2017-08-20 15:37:02Z

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, 2017 at 15:37

Matteo Frana

5794 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Abraham Gnanasingh Over a year ago

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 posted for this. Can you help me with this? Thanks in advance.

Abraham Gnanasingh Over a year ago

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.

Collectives™ on Stack Overflow

Load Data Asynchronously not working using redux-form

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related