如何将Redux存储传递到动态呈现的Redux表单组件中？

Question

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

为了解决错误，我将一个存储明确传递给Form组件，如下所示

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

但是存储也需要redux形式的自定义渲染文件。 例如

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

错误消失了，但是对我来说似乎是一种错误的方法:)这就是为什么我问如何将Redux存储更简单地传递给呈现的Redux形式的组件？

PS如果根元素已包装在Provider中，我是否可以将呈现的表单组件包装到Provider中？

Answer 1

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

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

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

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