Mapping redux state to props - state wiped out? - reactjs

Question

I am using redux, redux-form and react. I fill in the form fields, submit it and then I would like to display entered values in the Result component.
Result.jsx
import React from 'react';
import { connect } from 'react-redux';
const Result = props => {
console.log(props);
return (
<div>
test
</div>
);
};
const mapStateToProps = state => {
return {
formData: state.form
};
}
export default connect(mapStateToProps)(Result);
EDIT:
import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import { Provider } from 'react-redux';
import store from './state/store';
import MainForm from './containers/MainForm';
import Result from './components/Result';
class App extends Component {
render() {
return (
<Provider store={store}>
<BrowserRouter>
<div>
<Route path="/" component={MainForm} exact />
<Route path="/submitted" component={Result} />
</div>
</BrowserRouter>
</Provider>
);
}
}
export default App;
EDIT2:
class MainForm extends Component {
state = {
submit: false
};
handleSubmit = data => {
this.setState({ submit: true });
};
render() {
const { handleSubmit, pristine, submitting, reset } = this.props;
const { submit } = this.state;
if (submit) {
return <Redirect to="/submitted" />;
}
return (
<Wrapper>
<h2>Some header</h2>
<FormWrapper onSubmit={handleSubmit(this.handleSubmit)}>
// FORM FIELDS..
<Button variant="contained" color="primary" type="submit" disabled={submitting}>
Submit
</Button>
<Button variant="contained" disabled={pristine || submitting} onClick={reset}>
Clear Values
</Button>
</FormWrapper>
</Wrapper>
);
}
}
MainForm = reduxForm({
form: 'main'
})(MainForm);
export default MainForm;
I console.log the props to check its value. It gets fired twice. The first time the props contain the form values I hoped for under props.formData.main.values. Therefore I assume the mapStateToProps worked fine. But then the console.log gets fired for the second time and props.formData is an empty Object. I also use the Redux chrome extension and I can clearly see that after form submit the data in the store are wiped out.
Could anyone explain to me this behaviour and how can I fix it? Thank you.

Answer 1

You're not 'consuming' submited data (dispatch action to save data in redux store?) in handler.
Probably form data are cleared after redirect for some reasons, f.e. reseting state, not holding old data for a new form on next page/url etc.

Answer 2

I got it fixed. The default behaviour of Redux-form is to throw away the form data once the form is unmounted. To prevent this default behaviour you have to set destroyOnUnmount to false like this:
MainForm = reduxForm({
form: 'main',
destroyOnUnmount: false // default is true
})(MainForm);
I hope this helps someone with the same problem.