The problem
https://codesandbox.io/s/3o4j9y375
What I have
Ok, this one is really tricky... I have the following code :
Form = connect((state, props) => ({
formValues: getFormValues('myForm')(state),
initialValues: props.values,
}))(Form);
What I expect
Having in my Form props both formValues and initialValues.
Where did it go wrong?
First I just wanted formValues to be in my Form props : I encountered an issue with that because i am using IMMUTABLE so I had to import like this
import { getFormValues } from 'redux-form/immutable';
Instead of like this
import { getFormValues } from 'redux-form';
Once that fixed I wanted to add some initialValues to my form as showed above and THAT is is the problem.
I console logged my props in Form and initialValues are passed but not in the JSON format that I used but in an IMMUTABLE MAP...
But in this format, the values are not injected in the form.
TL/DR
import redux-form/immutable -> can use getFormValues but initialValues are stored as immutable Map so not working
import redux-form -> cannot use getFormValues but initialValues are stored in JSON so it's working
You can use formValueSelector https://redux-form.com/7.4.2/docs/api/formvalueselector.md/
import { formValueSelector } from 'redux-form/immutable'
const selector = formValueSelector('myForm');
const mapStateToProps = (state) {
formValues: selector('myForm')(state),
}
export default connect(mapStateToProps)(Form);
Related
Before Introducing react-redux (useSelector,useDispatch) through connect we used to check to props types like this..
import PropTypes from 'props-types'
Component.propTypes ={
post:PropTypes.object.isRequired
}
const mapStateToProps = state =>({
post:state.post
})
export default connect(mapStateToProps,null)(Component);
But now react-redux Introduce (useSelector,useDispatch), so using these latest techniques we access state or function like this.
import PropTypes from 'props-types'
import {useDispatch,useSelector}from 'react-redux'
import getLoad from 'function/getLoad'
const dispatch = useDispatch(()=>getLoad())
const post = useSelector(state=>state.post)
so Now How we Will check Prop Types here Using these techniques.
I tried to check prop types using react-redux (useSelector,useDispatch) like this, kindly check this, is it correct or not kindly response back.
const dispatch = useDispatch( ()=>getLoad() )
const post = useSelector( state=>state.post )
//checking props types
Component.propTypes = {
getLoad:PropTypes.func.isRequired,
post: PropTypes.object.isRequired
}
UPDATE: It's not possible to solve from information I gave you, the problem is that code is updated in ComponentReceiveProps hook and original values overwrite changed values.
I work on project developed by external agency that didn't do the best job.
It is front-end application using React, Redux and Redux-Forms
There is one form that is used in two different pages. It works well in one page, but doesn't react in the other. I cannot change value of inputs by UI, neither by changeFieldValue function. Redux state is not changed.
In both cases, the same component is used. It contains reduxForm function.
const mapDispatchToProps = dispatch => ({
changeFieldValue: (field, value) => dispatch(change('ContractConsumption', field, value)),
});
class ContractConsumption extends React.Component {
// ...
}
ContractConsumption = reduxForm({
form: 'ContractConsumption',
enableReinitialize: true
})(ContractConsumption);
Any help would be appreciated. It's confusing to me, why the same component with redux form would work in one case and not in the other.
The whole code is overly complicated and heavily coupled, so it's not possible to share it easily or test it part by part.
It looks like you/agency didn't connect the form to the store:
import React, { Component } from 'react';
import { reduxForm } from 'redux-form';
import { connect } from 'react-redux';
class Example extends Component {
// ...
};
const mapStateToProps = (state) => ({
// ...
});
const mapDispatchToProps = (dispatch) => ({
// ...
});
Example = connect(
mapStateToProps,
mapDispatchToProps
)(Example);
export default reduxForm({
form: 'example' // a unique name for this form
})(Example);
See How do I mapStateToProps or mapDispatchToProps?
I have a redux-form that I'm connecting to the state as follows:
export default connect(mapStateToProps)(reduxForm({
form: 'MyForm',
validate // validation function given to redux-form
})(MyForm));
I now would like to get a slug value which is a react-router param (after navigating to the page like this:
browserHistory.push(`/mypage/${slug}`) ). However ownProps is empty:
const mapStateToProps = (state, ownProps) => {
console.dir(ownProps); // ISSUE: this is empty
const someField = selector(state, 'someField');
...
};
I tried different ways of connected to redux-form, but haven't been successful. Would really appreciate any hints on how to solve this.
I think I have understood your problem here. You need to connect the redux form in order to get values using selector. Please see example code below. Hope it will help you.
import React from 'react'
import { Field, reduxForm, formValueSelector } from 'redux-form'
import validate from './validate'
import example from './components/example'
import { connect } from 'react-redux'
function myForm ({
someProp,
exampleClick
}) {
function handleSubmit (e) {
}
return <form onSubmit={handleSubmit}>
<Field
name='name'
component={example}
submitBtnClicked={exampleClick} />
</form>
}
let thisForm = reduxForm({
form: 'myForm',
validate
})(myForm)
const selector = formValueSelector('myForm')
thisForm = connect(
state => {
const someField = selector(state, 'someField')
return ({someField})
}
)(thisForm)
export default thisForm
I solved it by adding react-router's withRouter around my connected component:
export default withRouter(connect(mapStateToProps)(reduxForm({
form: 'MyForm',
validate // validation function given to redux-form
})(MyForm)));
I am building a form using React and Redux Form. I use the formValueSelector to connect to several input fields. However, when I update these input fields in the UI, the form is not re-rendered. My code looks like this:
// HelpForm.jsx
import React from 'react';
import { connect } from 'react-redux';
import { reduxForm, formValueSelector } from 'redux-form';
import CategorySelectBlock from 'apps/help_form/components/CategorySelectBlock';
const selector = formValueSelector('help_form');
const mapStateToProps = state => ({
category: selector(state, 'category'),
subcategory: selector(state, 'subcategory')
});
class HelpForm extends React.Component {
render() {
const {
category,
subcategory
} = this.props;
console.log('Rendering HelpForm');
console.log('category:', category);
console.log('subcategory:', subcategory);
return (
<form id="helpform">
<CategorySelectBlock
category={category}
subcategory={subcategory}
/>
</form>
);
}
}
const ReduxHelpForm = reduxForm({
form: 'help_form'
})(HelpForm);
export default connect(
mapStateToProps
)(ReduxHelpForm);
I can see from my console logs that this HelpForm component is only rendering once, even after I select a new value for the category or subcategory fields (these are defined within the CategorySelectBlock component).
Am I doing something wrong, or misunderstanding how formValueSelector works? Any guidance would be much appreciated. Thank you!
I figured it out. I wasn't passing the onChange property through my custom input type.
I have a decorated component with redux-form HOC and I want to access a Field value from the decorated component to enable/disable and hide/show other fields. what's the best approach to do that?
I tried to use Fields component to operate in the dependent fields but that hurts the performance of the decorated component as it provokes useless re-renders
It is also possible to connect the decorated component with redux and use formValueSelector that is provided by redux-form, but I wonder if there is a better approach to access a field(s) value.
Form Selectors and Field-dependent Values is described here. The solution is based on getFormValues:
import React from 'react';
import { connect } from 'react-redux';
import { reduxForm, getFormValues } from 'redux-form';
import FormComponent from './form.component';
export const FormContainer = props => {
const submitForm = (formValues) => {
console.log('submitting Form: ', formValues);
}
return (
<FormComponent
formValues={props.formValues}
change={props.change}
onSubmit={submitForm}
handleSubmit={props.handleSubmit}
/>
);
}
const mapStateToProps = state => ({
formValues: getFormValues('my-very-own-form')(state),
});
const formConfiguration = {
form: 'my-very-own-form',
}
export default connect(mapStateToProps)(
reduxForm(formConfiguration)(FormContainer)
);
and in your formComponent you can get the formValues from the props:
export const FormComponent = ({ handleSubmit, onSubmit, formValues }) => {
}