Use initialValues on component utilizing async data population - redux-form

Question

I am trying to pre-populate Personal Info however I am running into an async issue. Any help will be appreciated.
looked at : https://medium.com/#1sherlynn/react-redux-form-two-ways-to-add-initial-values-ab48daa0a32e and https://redux-form.com/6.0.0-alpha.4/examples/initializefromstate/
class AccountOverview extends Component {
constructor() {
super();
this.state = { data: [] };
}
async componentDidMount() {
const data = { fullname: "fullname", username: "username" }
this.setState({ data })
}
render() {
console.log(this.state.data)
<PersonalInfo
initialValues={this.state.data} />
....
I expect the form to be populated by the data state. I logged with he the following result
[]
{ fullname: "fullname", username: "username" }
i feel the component does not reload after the async call is completed.
PersonalInfo.js:
const PersonalInfo = props => {
const { username, fullname, handleOnChange, validationErrors } = props;
return (
<div>
<h1> Personal Information</h1>
<br />
<Field
type="text"
name="fullname"
icon=""
label="Fullname"
value={fullname}
component={FormField}
onChange={handleOnChange}
/>
<Field
type="text"
name="username"
icon=""
label="Username"
value={username}
component={FormField}
onChange={handleOnChange}
/>
</div>
)
}
function mapStateToProps(state) {
return {
state
};
}
export default reduxForm({form: "AccountOverview"})(connect(mapStateToProps)(PersonalInfo))

Answer 1

From the docs, you have missed important step.
Add initialValuesprop in mapStateToProps and you can retrieve initialValues from the redux store
So your mapStateToProps should be,
const mapStateToProps = (state, props) => ({
initialValues: state, // retrieve data from redux store
})
To pass the initialValues props into the redux form, we use the connect function
Add enableReinitialize : true When set to true, the form will reinitialize every time the initialValues prop changes
This,
export default reduxForm({form: "AccountOverview"})(connect(mapStateToProps)(PersonalInfo))
Should be,
export default connect(
mapStateToProps
)(reduxForm({
form: 'AccountOverview', // a unique identifier for this form
enableReinitialize: true
})(PersonalInfo))