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

Question

我正在使用 redux-form 6.0.0-rc.5，我正在尝试显示用户输入的表单值。

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

所以，我的简化 App 架构应该是这样的：

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

该组件是安装到 'form' 的 redux 形式并且正在运行。

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

获取表单值（从状态 form.formName.values）并将它们发送到我的显示组件的好方法是什么？

我尝试过的事情：

将 App 连接到商店和 mapStateToProps (form.formName.values) 然后将其传递给 Display作为道具。但它会引发错误，因为在用户键入任何内容之前，表单状态中不存在值。
使用 List 组件内的 redux-form 提供的函数 getFormValues('formName') 但它 returns 一个函数或未定义：

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

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

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

Answer 3

formValueSelector() 没有必要。

您也可以直接将其作为属性访问。

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

与

相同

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

Answer 4

从 redux-form 6.0.0 开始（在 7.0.0 中仍然相同），您可以使用函数 formValueSelector() 到任何 redux 形式的 select 值在您的申请中有：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)

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

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

reactjs

redux

redux-form

react-redux