Redux-Form overwrite the previous value in React

Question

I am recently working on a react project which is creating taking the input from the redux-form@8.3.7. But the issue is it is not taking the value in the form.

On checking the redux-dev tool the value is replacing the previous one, I searched for a similar issue throughout the internet could not find a solution for it.

My Code

Reducers

import { combineReducers } from "redux";
import { reducer as formReducer } from 'redux-form'
import ocaFormFieldReducer from "./ocaFormReducers/ocaFormFieldReducer";
import stepperActiveStepReducer from "./ocaFormReducers/stepperActiveStepReducer";
import groupFieldReducer from "./ocaFormReducers/groupFieldReducer";


const reducer = combineReducers({
    ocaFormFieldReducer,
    stepperActiveStepReducer,
    groupFieldReducer,
    formReducer
});

export default reducer;

import React from "react";
import { connect } from "react-redux";
import { Field, reduxForm } from "redux-form";
import { withStyles } from "@material-ui/core/styles";

function ProductPlanning(props) {
    const { classes, formFieldLoading, formFieldData, handleActiveStep, activeStep, cancelFormProgress, setGroupFieldApiStart, groupFieldData } = props;

return (
        <div className={classes.root}>
            {formFieldLoading && <LoadingScreen />}
            <form>
                <Field name="SUrya" component="input" type="text" />
            </form>
)
}

export default reduxForm({ form: "ocaFormData" })(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ProductPlanning)));

It would be helpful if you can throw some light on this.

Thank you in advance.

Answer 1

The solution is simple and yet DUMB.

In Combine reducer, the value reducer should have a key-value pair with key name as form.

const reducer = combineReducers({
    ocaFormFieldReducer,
    stepperActiveStepReducer,
    groupFieldReducer,
    form: formReducer
});