Initializing redux-form wizard - redux

Question

So I have a simple form wizard taken from an example in redux-form. I want to initialize fields with data received from an asynchronous API call.
The way it is right now, fields are not being populated without the enableReinitialize: true param in each page of the wizard, because initialization already happens once upon starting the server request.
If on the other hand I add enableReinitialize: true to the wizard pages then any user input will be discarded upon moving from page to page and initialValues will be set again.
I have also tried adding the keepDirtyOnReinitialize: true option in conjunction with enableReinitialize: true to each page, but to no avail.
What would be the correct way of creating a form wizard when you need to have a subset of fields be initialized by asynchronously fetched data which has to be overwriteable by user?
WizardForm.jsx:
import React, {Component, PropTypes} from 'react'
import WizardFormFirstPage from './WizardFormFirstPage.jsx'
import WizardFormSecondPage from './WizardFormSecondPage.jsx'
import WizardFormThirdPage from './WizardFormThirdPage.jsx'
import fetchData from "./fetchData.jsx";
import {connect} from "react-redux";
class WizardForm extends Component {
constructor(props) {
super(props);
this.nextPage = this.nextPage.bind(this);
this.previousPage = this.previousPage.bind(this);
this.state = {
page: 1
}
}
componentWillMount() {
if (!this.props.hasFetched)
this.props.fetchData();
}
nextPage() {
this.setState({ page: this.state.page + 1 })
}
previousPage() {
this.setState({ page: this.state.page - 1 })
}
render() {
const { onSubmit } = this.props;
const { page } = this.state;
return (
<div>
{page === 1 && <WizardFormFirstPage onSubmit={this.nextPage} initialValues={this.props.initialValues}/>}
{page === 2 &&
<WizardFormSecondPage previousPage={this.previousPage} initialValues={this.props.initialValues}
onSubmit={this.nextPage}/>}
{page === 3 &&
<WizardFormThirdPage previousPage={this.previousPage} initialValues={this.props.initialValues}
onSubmit={onSubmit}/>}
<label>{this.props.isFetching ? "Fetching data.." : "Fetched data successfully." }</label>
</div>
)
}
}
function mapStateToProps(state) {
return {
initialValues: state.prefill.data,
isFetching: state.prefill.fetching,
hasFetched: state.prefill.fetched
}
}
WizardForm = connect(
mapStateToProps,
{fetchData}
)(WizardForm);
WizardForm.propTypes = {
onSubmit: PropTypes.func.isRequired,
initialValues: PropTypes.object
};
export default WizardForm;
WizardFormFirstPage.jsx:
class WizardFormFirstPage extends Component {
constructor(props) {
super(props);
}
render() {
const {handleSubmit} = this.props;
return (
<form onSubmit={handleSubmit}>
<Field name="firstName" type="text" component={renderField} label="First Name"/>
<Field name="lastName" type="text" component={renderField} label="Last Name"/>
<Field name="downPayment" type="text" component={renderField}
label="Down Payment" normalize={normalizeDownPayment}/>
<div>
<button type="submit" className="next">Next</button>
</div>
</form>
)
};
}
WizardFormFirstPage = reduxForm({
form: "wizard",
destroyOnUnmount: false,
forceUnregisterOnUnmount: true,
//enableReinitialize: true, // <-- !
validate
})(WizardFormFirstPage);
export default WizardFormFirstPage;
fetchData.jsx:
export default function fetchData() {
return (dispatch) => {
dispatch({type: "FETCH_DATA_START"});
axios.get("http://rest.learncode.academy/api/nordischby/customer")
.then(response => {
dispatch({type: "FETCH_DATA_FINISH", data: response.data[0]});
})
.catch(error => {
console.error(error);
});
}
};
prefill.jsx:
const initialState = {
data: {},
fetching: false,
fetched: false,
error: null
};
const prefillReducer = (state = initialState, action) => {
switch (action.type) {
case "FETCH_DATA_START":
return {
...state,
fetching: true
};
case "FETCH_DATA_FINISH":
return {
...state,
data: action.data,
fetching: false,
fetched: true
};
default:
return state
}
};
export default prefillReducer;

Answer 1

I've found what was wrong. For future reference:
I'm now using the following options for reduxForm():
export default reduxForm({
form: "wizard",
destroyOnUnmount: false,
//forceUnregisterOnUnmount: true, // <-- This bad boy was wrong
keepDirtyOnReinitialize: true,
enableReinitialize: true,
validate
})(WizardFormThirdPage)