I am using redux-form 6.0.0-rc.5 and I am trying to display the form values as they are entered by the user.
However, I want these values to be displayed from another component, not the redux form itself.
So, my simplified App architecture would be like that :
<App /> -> (main component -container ?-)
<List /> -> (connect to form values and pass them down)
<Elem /> -> (display form value)
<Form /> -> (enter form values)
The component is a redux-form mounted to 'form' and is working.
Form = reduxForm({
form: 'formName'
})(Form)
What would be a good way of getting the form values (from state form.formName.values) and send them to my Display component ?
Things I have tried :
Connect App to the store and mapStateToProps (form.formName.values) then pass it down to Display as a prop. But it throws an error since values does not exist in the form state until the user has typed anything.
Using the function getFormValues('formName') provided by redux-form inside the List component but it returns a function or undefined :
Elem
const Elem = ({ name }) => (
<li>{name}</li>
)
List
const List = ({ values }) => (
{values.map(value => <Elem name={value.name} />)}
)
List = connect(
state => ({
values: getFormValues('formName')
})
)(List)
There must be something I am missing or I still do not understand correctly whether it is with redux-form or redux itself... I hope someone will be able to enlighten me !
Thank you and have a great day.
To get them, you will need to connect() directly to the form values in the Redux store. To facilitate this common use case, redux-form provides a convenient selector via the formValueSelector API.
Passing State to a Component To pass the state into another component, you can pass it as a prop. Then, inside <ExampleComponent /> , you can access the data as this. props.
The FieldArray component is how you render an array of fields. It works a lot like Field . With Field , you give a name , referring to the location of the field in the Redux state, and a component to render the field, which is given the props to connect the field to the Redux state.
Try using
List = connect(
state => ({
values: getFormValues(state.form.formName)
})
)(List)
instead. At least that's how it worked in v5, although there the method was called getValues
and not getFormValues
.
Edit:
After a quick look at the docs it seems in v6 you'll have to use a formValueSelector
: http://redux-form.com/6.0.0-rc.3/examples/selectingFormValues/
formValueSelector()
is not necessary.
You also can directly access it as a property.
List = connect(
state => ({
formValues: {
id: state.form.formName.values.id
}
})
)(List)
Same as
List = connect(
state => ({
formValues: {
id: formValueSelector('formName')(state, 'id')
}
})
)(List)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With