I have React application in which I am using Redux to manage application state. There are mutltiple reducers which is custom created and I have forms too in my application. To maintain form state I have used redux-form library and its working fine but whenever I submit the form and move to next route, the state for previous route form gets removed from redux form property.
store.js
import { createStore, combineReducers } from "redux";
import { reducer as formReducer } from 'redux-form'
import { CountHandler, ProgressbarHandler } from "./reducers/Reducer";
const RootStore = combineReducers({
form: formReducer,
Counter:CountHandler,
Progress: ProgressbarHandler,
})
const store = createStore(RootStore)
export default store;
Route1.js
import {React, useState} from 'react'
import { TitleOptions } from '../../data/title'
import Button from '../../components/form-feilds/button/Button'
import Dropdown from '../../components/form-feilds/dropdown/Dropdown'
import Input from '../../components/form-feilds/input/Input';
import { Field, reduxForm } from 'redux-form';
import ApplicantPreview from './ApplicantPreview';
import { useSelector } from 'react-redux';
import { useNavigate } from 'react-router';
import { Link } from 'react-router-dom';
function ApplicantForm(props) {
let formProperties = {
lblTitle: "Your title",
lblFirstName: "Enter your first name",
lblLastName: "Enter your last name",
submitButtonText: "Next",
dropdownOptions: TitleOptions
}
let isBack = useSelector((state) => state.BackJourney)
let navigate = useNavigate();
return (
<div className="container bupa-container page-form-wrapper">
<form onSubmit={props.handleSubmit((data) => navigate('/quote-cover-for'))}>
<div className="row">
<div className="col-7 col-sm-12 col-lg-2 grid-cust-pad">
<Field name="ApplicantTitle" inputProps={{dropdownLabelClass: 'input-label', dropdownLabel:formProperties.lblTitle, dropdownFieldClass:'form-control', options:formProperties.dropdownOptions}} component={Dropdown} />
</div>
<div className="col-12 col-sm-12 col-lg-5 grid-cust-pad">
<Field name="ApplicantFirstName" value="Test" inputProps={{inputLabel:formProperties.lblFirstName, inputLabelClass:'input-label', inputFieldType:'text', inputFieldClass:'form-control'}} component={Input} />
</div>
<div className="col-12 col-sm-12 col-lg-5 grid-cust-pad">
<Field name="ApplicantLastName" inputProps={{inputLabel:formProperties.lblFirstName, inputLabelClass:'input-label', inputFieldType:'text', inputFieldClass:'form-control'}} component={Input} />
</div>
<div className="col-12 text-center">
<Button buttonType="submit" buttonText={formProperties.submitButtonText} buttonClass="btn btn-primary btn-chevron-next mt-30" />
</div>
</div>
</form>
</div>
)
}
export default reduxForm({
form:'applicantForm'
})(ApplicantForm)
Route2.js
import React, {useState} from 'react';
import { CoverForOptions } from '../../data/CoverFor';
import Button from '../../components/form-feilds/button/Button';
import Dropdown from '../../components/form-feilds/dropdown/Dropdown';
import Counter from '../../components/form-feilds/counter/Counter';
import { Field, reduxForm } from 'redux-form';
function CoverSelectForm(props) {
let formProperties = {
lblTitle: "Select Rider",
submitButtonText: "Next",
backButtonText: "Back",
options: CoverForOptions
}
return (
<div className="page-form-wrapper">
<form>
<div className="row">
<div className="col-12">
<Field name="CoverType" inputProps={{dropdownLabelClass:"input-label", dropdownLabel:formProperties.lblTitle, dropdownFieldClass:"form-control", options:formProperties.options}} component={Dropdown} />
</div>
<div
className="col-12 text-center">
<button type="button" className="btn btn-link btn-chevron-prev mt-30" onClick={GoBack}>Back</button>
<Button buttonType="submit" buttonText={formProperties.submitButtonText} buttonClass="btn btn-primary btn-chevron-next mt-30" />
</div>
</div>
</form>
</div>
)
}
export default reduxForm({
form:'coverSelectForm'
})(CoverSelectForm)