My redux wizard form doesn't carry over form values - redux

Question

so I have a 4 page form, the first 3 have form fileds while the last one is just a success page shown after the data is submitted.
I have initial values set for fields on each page in my quoteReducer like so:
import {
QUOTE_SUBMIT,
GET_QUOTES,
SET_QUOTE_INITIAL_VALUES
} from "../actions/types";
const initialQuoteForm = {
your_details: {
title: "Mr",
employment_status: "Employed"
},
your_house: {
alarm_type: "Standard",
two_or_more_smoke_alarms: false,
neighbourhood_watch: false,
property_type: "Bungalow",
cover_type: "Holiday Home",
heating_type: "Electric"
},
your_insurance_details: {
first_time_buyer: false,
currently_or_previously_insured: false,
landlord_or_tennant: "Landlord"
}
};
const initialState = {
quotes: [],
currentQuote: {},
quoteInitial: initialQuoteForm,
message: "",
ok: true,
error: []
};
export default function (state = initialState, action) {
switch (action.type) {
case GET_QUOTES:
return {
...state,
ok: action.payload.ok,
message: action.payload.message,
errors: action.payload.errors,
quotes: action.payload.quotes
};
case QUOTE_SUBMIT:
return {
...state,
ok: action.payload.ok,
message: action.payload.message,
errors: action.payload.errors,
currentQuote: action.payload.quote
};
case SET_QUOTE_INITIAL_VALUES:
return {
...state,
quoteInitial: action.payload
};
default:
return state;
}
}
The initial values are set on the form when I look at it in the store. However, when I move to the next page, the values I entered that weren't set initially (for fields without initial values) aren't preserved and the only values in the store for that page are the initial ones again.
The values for fields on the final page ARE saved. Every form is setup to preserve form data like so (second page example)
export default reduxForm({
form: "quote", //Form name is same
destroyOnUnmount: false, // <------ preserve form data
forceUnregisterOnUnmount: true // <------ unregister fields on unmount
})(QuoteFormSecondPage);
Does anyone have any idea what would cause the form fields values not to be preserved.
Note, when I remove initial values the field values are preserved and do carry over!
Edit: Here is my quoteForm.component that displays each page/form
<div className="quote-container">
{page === 1 && (
<QuoteFormFirstPage
close={this.props.toggleModal}
onSubmit={this.nextPage}
currentPage={page}
initialValues={this.props.initialValues}
enableReinitialize={true}
/>
)}
{page === 2 && (
<QuoteFormSecondPage
close={this.props.toggleModal}
previousPage={this.previousPage}
onSubmit={this.nextPage}
currentPage={page}
initialValues={this.props.initialValues}
enableReinitialize={true}
/>
)}
{page === 3 && (
<QuoteFormThirdPage
close={this.props.toggleModal}
previousPage={this.previousPage}
toggleAlternateAddress={this.toggleAlternateAddress}
onSubmit={this.onSubmit}
currentPage={page}
showAlternateAddress={this.state.showAlternateAddress}
initialValues={this.props.initialValues}
enableReinitialize={true}
/>
)}
{page === 4 && (
<QuoteFormSuccessPage
close={this.props.toggleModal}
previousPage={this.previousPage}
currentPage={page}
/>
)}
</div>

Answer 1

Solved, in case anyone runs into the issue in future. I was passing
initialValues={this.props.initialValues}
enableReinitialize={true}
to each component, it only needs to be passed in once, to the first one.