redux-form : How to display form values on another component

Question

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.

tmaximini · Accepted Answer · 2016-08-19T11:00:38.987

7

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/

edited Aug 19 '16 at 11:00

answered Aug 19 '16 at 10:51

tmaximini

8,174
5
44
68

3

Yes. `formValueSelector` is the answer. – Erik R. Aug 20 '16 at 08:11
Thank you for your answer. I saw the selecting form values example, however my understanding of the docs was the following : the getFormValues function is a quick way to get all values from a given form anywhere in the application (tab "Selectors" in the docs). And the formValueSelector was made to get specific values (meaning not necessarily all values) while in a redux-form in order to use them inside the form itself. Is that correct ? And if I need to use formValueSelector, do I then need to associate all my form fields to the selector ? Thank you again guys ! – Thomas Milan Aug 20 '16 at 11:49
1

Edit : Allright, I made it work with formValueSelector but then I tried it again with getFormValues and this is the exact syntax that is now working for me : `const selector = getFormValues('fomName') List = connect({ state => ({ values: selector(state) }) })(List)` The other syntax in my original question was not working. Maybe it will help someone as well ! – Thomas Milan Aug 22 '16 at 08:43
Do you think you could link your solution? I'm trying to do the same thing. – user3768533 May 11 '17 at 16:34
I'm Using this method but Can't find variable 'List' error occur. How to fix that ? – Saravana Kumar Sep 13 '17 at 14:47

score 3 · Answer 2 · answered Dec 25 '16 at 15:27

3

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)

answered Dec 25 '16 at 15:27

Julha

1,027
13
12

do you know the same technique to update value from any form ? – stackdave Mar 03 '18 at 19:28
1

https://redux-form.com/7.3.0/docs/api/actioncreators.md/ 1. import reduxFormActions from 'redux-form/es/actions'; 2. bind the change action to your component with redux: bindActionCreators(reduxFormActions.change, dispatch) 3. call action: this.props.actionsReduxForm('formName', fieldName, fieldValue) – Julha Mar 04 '18 at 16:27
bindActionCreators did not work, just this.props.dispatch(change('myform', fieldKey, filterValue)); – stackdave Mar 11 '18 at 16:15

score 1 · Answer 3 · edited May 23 '17 at 12:26

1

I had the same problem. Apparently, 'values' is a saved name in redux-form. Using Iurii Budnikov advice I managed to solve the problem - just change the the variable name from 'values' to something else in your connect call:

List = connect(
  state => ({
    formValues: getFormValues(state.form.formName)
  })
)(List)

edited May 23 '17 at 12:26

Community

1
1

answered Oct 06 '16 at 07:47

Ido

543
4
11

score 0 · Answer 4 · answered Jul 17 '17 at 08:29

0

Starting from redux-form 6.0.0 (and still the same in 7.0.0), you can use the function formValueSelector() to select values from any redux form you have in your application: http://redux-form.com/7.0.0/docs/api/FormValueSelector.md/

import { connect } from 'react-redux';
import { formValueSelector } from 'redux-form';

const selector = formValueSelector('formName');

List = connect(
  state => ({
    name: selector(state, 'name')
  })
)(List)

answered Jul 17 '17 at 08:29

Tom Van Rompaey

3,216
17
20

I'm trying to create a preview component where all values are shown before user can submit the form. I'm trying to get all form values from a wizard form which is named "wizard". following this answer gives me "wizard is not defined" error. What should I do? – Samia Ruponti Sep 18 '17 at 06:30

redux-form : How to display form values on another component

4 Answers4

Linked