redux-form:如何在另一个组件上显示表单值

Question

我使用redux-form 6.0.0-rc。5，我试图显示表单值，因为它们是由用户输入的。

但是，我希望这些值从另一个组件显示，而不是redux表单本身。

所以，我的简化的应用程序架构是这样的:

<App />              -> (main component -container ?-)
  <List />           -> (connect to form values and pass them down)
    <Elem />         -> (display form value)
  <Form />           -> (enter form values)

该组件是一个redux-form，安装在'form'上，并且正在工作。

Form = reduxForm({
  form: 'formName'
})(Form)

获取表单值(从状态form. formname .values)并将它们发送到我的显示组件的好方法是什么?

我尝试过的事情:

• 将App连接到store和mapStateToProps (form.formName.values)，然后将其作为道具传递给Display。但是它会抛出一个错误，因为在用户键入任何内容之前，表单状态中不存在值。

• 使用List组件内部redux-form提供的函数getFormValues('formName')，但它返回一个函数或未定义:

Elem

const Elem = ({ name }) => (
  <li>{name}</li>
)

const List = ({ values }) => (
  {values.map(value => <Elem name={value.name} />)}      
)
List = connect(
  state => ({
    values: getFormValues('formName')
  })
)(List)

一定有什么我错过了，或者我仍然不能正确理解它是否与redux-form或redux本身…我希望有人能给我开导开导!

谢谢大家，祝你们有美好的一天。

Answer 1

尝试使用

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

。至少在v5中是这样工作的，尽管该方法被称为getValues而不是getFormValues。

编辑:快速查看文档后，似乎在v6中，您将不得不使用formValueSelector: http://redux-form.com/6.0.0-rc.3/examples/selectingFormValues/

Answer 2

formValueSelector() 不是必需的。

你也可以把它作为属性直接访问。

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

一样

List = connect(
  state => ({
    formValues: {
       id: formValueSelector('formName')(state, 'id')
    }
  })
)(List)

Answer 3

我也遇到了同样的问题。显然，"values"是以redux形式保存的名称。使用Iurii Budnikov的建议，我设法解决了这个问题-只需将变量名称从"值"更改为连接调用中的其他内容:

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

Answer 4

从redux-form 6.0.0开始(在7.0.0中仍然如此)，您可以使用函数formValueSelector()从应用程序中的任何redux表单中选择值: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)