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)

该组件是安装在“表单”上的Redux表单，正在运行。

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

从状态form.formName.values获取表单值并将其发送到我的Display组件的一种好方法是什么？

我尝试过的事情：

• 将 App 连接到商店和 mapStateToProps （form.formName.values），然后将其作为道具传递给Display。但这会引发错误，因为直到用户键入任何内容，表单状态中的值才存在。

• 使用List组件内部的redux-form提供的 getFormValues （’formName’）函数，但它返回一个函数或未定义：

伊莱姆

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/