如何将 redux 存储传递给动态呈现的 redux-form 组件？答案

【问题标题】：How to pass a redux store into dynamically rendered redux-form component?如何将 redux 存储传递给动态呈现的 redux-form 组件？
【发布时间】：2017-07-11 09:21:27
【问题描述】：

我有一个使用 redux-form 的 React Redux 应用程序。表单由事件动态呈现。在渲染时，我收到错误 Uncaught Error: Could not find "store" in either the context or props of "Connect(Form(FormCreate))"

为了修复错误，我明确地将一个 store 传递给 Form 组件，如下所示

render(<FormCreate store={store}/>, document.getElementById('form'))

但 redux-form 自定义渲染字段也需要 store。例如

<Field store={store} component={renderField} type="text" name="text" label="Text"/>

错误消失了，但在我看来这是一种不好的方法 :) 这就是为什么我问如何更简单地将 redux 存储传递给渲染的 redux-form 组件？

PS 如果 Root 元素已经包装在 Provider 中，我可以将渲染的表单组件包装到 Provider 中吗？

【问题讨论】：

标签： javascript reactjs redux react-redux redux-form

【解决方案1】：

您可以为您的表单使用 reduxForm 装饰器，它将为您解决此问题。在下面的示例中，SimpleForm 是一个由表单组成的 React 组件。这将使您的 Field 组件中的数据以 Redux 状态显示。然而，装饰器只是 es7 的一部分，但在 Typescript 中可用。

export default reduxForm({
  form: 'simple' // a unique identifier for this form
})(SimpleForm)

下面的 jsfiddle 展示了如何使用 reduxForm 装饰器 this 的完整示例。

https://jsfiddle.net/bmv437/75rh036o/

【讨论】：

好的，我使用了 redux-form 文档说的装饰器，但是 store 没有传递到新的渲染表单中。我通过用第二个 <Provider store={store}> 包裹来决定一个问题。
reduxForm 装饰器不会将 store 作为组件的 prop 提供给您，但它会确保您不需要将 store 提供给组件。它将确保来自字段的数据最终处于 redux 状态。