reactjs - redux 形式 : How to display form values on another component

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)

该组件是一个安装到“form”的 redux-form，并且正在工作。

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

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

我尝试过的事情:

• 将App连接到商店和mapStateToProps (form.formName.values)，然后将其作为 prop 传递给 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/