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 anothe

Answer 1

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)

Answer 2

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)

Answer 3

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/

Answer 4

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)