reduxストアを動的にレンダリングされたredux-formコンポーネントに渡すにはどうすればよいですか？

Question

私は、還元型を使用しているReact Reduxアプリケーションを持っています。フォームはイベントによって動的にレンダリングされます。それは、レンダリングしながら、I'amがエラーを修正するには、エラーにUncaught Error: Could not find "store" in either the context or props of "Connect(Form(FormCreate))"

を取得、私は明示的に

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

しかし、また、Reduxのフォームカスタムfiedlsをレンダリングすることにより、必要に応じて店舗怒鳴るよう、Formコンポーネントに店を渡します。例えば

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

エラーが離れて行くだったが、それは私に悪いアプローチだ:)私はどのように私はより簡単にレンダリングされたReduxの形式のコンポーネントにReduxのストアを渡すことができ尋ねる理由ですか？

PSルート要素が既にプロバイダにラップされている場合、レンダリングされたフォームコンポーネントをプロバイダにラップできますか？

Answer 1

この問題を解決するフォームには、reduxFormデコレータを使用できます。以下の例では、SimpleFormはフォームで構成されるReactコンポーネントです。これにより、フィールドコンポーネントのデータがRedux状態で表示されます。しかし、デコレータはes7の一部にすぎませんが、Typescriptで利用できます。

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

以下jsfiddleこのreduxFormデコレータを使用する方法の完全な例を示しています。

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