initialValues does not get update when updating the form

Question

I have a form called Client which has a single form which handles both add and edit. Add is working but when editing the form(form is populated with initialValues if it's and edit form), the initialValues does not get update. I mean, if I go to client A form and update the field called client_name from 'abc' to 'xyz' then the client_name will be saved as 'xyz' in server but the initialValues does not get update so if i again go to same form without refreshing the page and save the form without changing anything then client_name is saved with previous value i. 'abc' because initialValues is not updated when updating the field.

Here is my code

import React, { Component } from 'react';
import { reduxForm, initialize } from 'redux-form';


const mapDispatchToProps = (dispatch, props) => ({
  addClient: clientData => dispatch(addClient(clientData)),
  editClient: clientData => dispatch(editClient(clientData)),
  loadClient: () => dispatch(loadClient(props.match.params.company)),
  resetClient: () => dispatch(resetClient()),
});

const mapStateToProps = createStructuredSelector({
  initialValues: selectClient(),
});


class Client extends Component<propsCheck> {
  state = {
    client: initialState,
    isLoading: false,
  };

  componentDidMount() {
    if (this.props.match.params.company) {
      this.props.loadClient();
    }
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.match.params.company) {
      this.props.loadClient();
    } else {
      this.props.resetClient();
    }
  }

  handleChange = ({ target: { name, value } }) => {
    this.setState({ client: { ...this.state.client, [name]: value } });
  };

  handleSubmit = event => {
    event.preventDefault();
    const { client } = this.state;
    const { initialValues, addClient: add, editClient: edit } = this.props;
    if (isEmpty(initialValues)) {
      add(client);
    } else {
      const updatedClient = updatedValue(initialValues, client, 'id');
      edit(updatedClient);
    }
    this.setState({ isLoading: true });
  };

  render() {
    const { invalid, submitting, initialValues } = this.props;
    return (
          <ClientForm
            loading={this.state.isLoading}
            handleChange={this.handleChange}
            handleSubmit={this.handleSubmit}
            disabled={invalid || submitting}
            type={initialValues && initialValues.id ? 'Edit' : 'Add'}
            reset={this.props.reset}
            history={this.props.history}
          />
    );
  }
}


const withReduxForm = reduxForm({
  form: 'clientForm',
  fields: requiredFields,
  validate,
  enableReinitialize: true,
})(Client);

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(withReduxForm);

Answer 1

Your initial values are being populated from redux state (selectClient in mapStateToProps) right? So, when you update/edit the client_name, are you changing the data in redux??