反应 - 终极版形式 - 调度不道具

Question

我使用react-redux-forms及以下quick start过去了，我创建反应的组分：

该类containts店确定指标和Provider

import React from 'react'; 
import { Provider } from 'react-redux'; 
import { createStore,applyMiddleware } from 'redux'; 
import { combineForms } from 'react-redux-form'; 
import RecordForm from './components/RecordForm.jsx' 

    const initRecord= { 
     name: '', 
     SUKL: '', 
     ATC: '' 
    }; 

    const store = createStore(combineForms({ 
     record: initRecord 
    })); 

    @translate(['record'], { wait: true }) 
    export default class App extends React.Component { 

    constructor(props){ 
     super(props); 
    } 


    render() { 
     const { t }= this.props; 
     return (
      <div> 
       <div className="row"> 
        <div className="row header"> 
          <h1> 
           {t('record.NewRecord')} 
          </h1> 
        </div> 
        <div className="row"> 
         <Provider store={ store }> 
          <RecordForm /> 
         </Provider> 
        </div> 
       </div> 
      </div> 
     ); 
    } 

这是形式的文件：

import React from 'react'; 
import { connect } from 'react-redux'; 
import { Control, Form } from 'react-redux-form'; 


export default class RecordForm extends React.Component { 

    constructor(props){ 
     super(props); 
    } 

    handleSubmit(record) { 
     const { dispatch } = this.props; 
     ///dispatch is undefined !!!!!!! 
    } 

    render() { 

     return (
      <div> 
       <Form model="record" onSubmit={(record) => this.handleSubmit(record)}> 
         <Control.text model="record.name" /> 
       <button type="submit"> 
       OK! 
       </button> 
       </Form> 
      </div> 
     ); 
    } 

} 

当我到handleSumbit部分 - 调度未定义。当我调试这个时，即使在RecordForm的构造器中，也有o派发道具或任何相关的东西来形成。我应该添加一些像connect（）这样的注释吗？我错过了什么？

Answer 1

您将需要使用connect()函数连接您的组件。如react-redux docs中所述，您可以仅使用connect()而不带任何参数。

从所提供的链接引用：

进样只是派遣和不听存储

出口默认连接（）（TodoApp）

但是，如果你正在提供您自定义的mapDispatchToProps函数作为参数，调度将不会提供给您。如果您仍然希望它以道具形式提供，您需要在mapDispatchToProps实施中明确地将其返回。你可以在FAQ Section的react-redux中看到它。

此外，如果你想尝试decorator实验功能，你可以使用它使用babel。在这种情况下，您可以按如下方式使用@connect连接组件。

@connect() 
export default class MyComponent extends React.Component { 
    // ... your code goes here. 
}