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.
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
});