Redux-form: How to load values(edit mode) from a API call to form when in modal pop up?

问题

I'm pretty new to React & Redux-Form and at the moment I am in need of some help.

Basically I have listing page with lists and their edit button. When the edit is clicked, I am showing a modal pop up with the fields and doing a API call to fetch the respective list data.

Could you please let me know how can I pre-populate the fields in the modal pop up with the data received from API call?

A demonstration with a code sample will be much appreciated(like I said I am pretty new to React & Redux & Redux-form). :(

Thanks in advance!

回答1:

Here is the flow:

componentDidMount() {
    this.props.loadClient(); // dispatch an action from your component
}

action dispatcher

loadClient() {
 // API call here
}

Store the result in redux reducer

case LOAD_PROFILE_SUCCESS:
  return {
    ...state,
    data: action.result // save your data here
  };

Then add the initialValues props to the @connect decorator

@connect(state => ({
    initialValues: state.profile.data // load the saved data here
  }),
  { loadClient }
)

Example: You could load the intialvalues at reduxForm itself.

let AddUser = props => {
    const { handleSubmit, initialValues } = props;
    return (
        <form onSubmit={handleSubmit}>
            <div>
                <label htmlFor="name">Name</label>
                <Field name="name" component="input" type="text" />
            </div>
            <div>
                <label htmlFor="email">Email</label>
                <Field name="email" component="input" type="email" />
            </div>
            <div>
                <label htmlFor="phoneno">PhoneNo</label>
                <Field name="phoneNo" component="input" type="text" />
            </div>
            <button type="submit">Submit</button>
        </form>
    );
}

export default AddUser = reduxForm({ form: 'addUser', initialValues: {
  name: "abc",
  email: "abc@gmail.com",
  phoneNo: "1234567890"
} })(AddUser)

Your component must have the Form component. Rest will be taken care by redux-form.

Note:
Structure of your initialValues must same of form data. Field name and the object property name should be same.

for more detail, you could refer redux-form official page Here

回答2:

Thank you @Sachidhanandhan!

Here's what I did -

Defined the reduxForm with enableReinitialize: true
In the mapStateToProps of connect(), I initialized the data that I received via API and stored in State with initialValues
Connected the reduxForm with connect() => This was the order I missed earlier

It is working like a charm now.

Cheers!

回答3:

If youre using redux, you just have to map your state in initialValues;

Here's how I do it:

const mapStateToProps = (state) => {
    const { state } = state;
    return {
        initialValues: state,
    }
}

then set enableReinitialize to true

FormName = reduxForm({
    form: 'formname',
    enableReinitialize : true
})(FormName);

then connect your app to your redux store

export default connect(mapStateToProps)(FormName);

回答4:

enableReinitialize : boolean [optional] When set to true, the form will reinitialize every time the initialValues prop changes. Defaults to false. If the keepDirtyOnReinitialize option is also set, the form will retain the value of dirty fields when reinitializing.

Set this to true

来源：https://stackoverflow.com/questions/49047617/redux-form-how-to-load-valuesedit-mode-from-a-api-call-to-form-when-in-modal

标签

javascript

html

reactjs

redux

redux-form