反応-Reduxのフォームをディスパッチは、私は<a href="https://davidkpiano.github.io/react-redux-form/" rel="nofollow noreferrer">react-redux-forms</a>を使用して<a href="https://davidkpiano.github.io/react-redux-form/docs/guides/quickstart.html" rel="nofollow noreferrer">quick start</a>を、次の午前小道具

Question

で渡されていない、私が作成したコンポーネントを反応させる：

これは、フォームファイルである

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> 
     ); 
    } 

このクラスcontaintsストアdefintionとプロバイダ：

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の実装で明示的に返却する必要があります。 react-reduxでFAQ Sectionにそれについて読むことができます。

また、実験的なdecorator機能を試してみたい場合は、ベルベルを使用して使用できます。その場合、次のように@connectを使用してコンポーネントを接続できます。

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