react-redux-form - 没有在道具中传递调度答案

【问题标题】：react-redux-form - dispatch is not passed in propsreact-redux-form - 没有在道具中传递调度
【发布时间】：2017-02-04 15:47:05
【问题描述】：

我正在使用 react-redux-forms 并关注 quick start 我创建了反应组件：

这个类包含存储定义和提供者

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 部分时 - dispatch 未定义。当我调试这个时，即使在 RecordForm 的构造器中，也没有在道具或与表单相关的任何内容中调度。我应该添加一些注释，例如 connect() 吗？我错过了什么？

【问题讨论】：

标签： forms reactjs redux

【解决方案1】：

您需要使用connect() 函数连接您的组件。正如react-redux docs 中提到的，您可以只使用connect() 而无需任何参数。

引用提供的链接：

注入只是调度而不听存储

导出默认连接()(TodoApp)

但是，如果您提供自定义 mapDispatchToProps 函数作为参数，则不会向您提供调度。如果您仍然希望它作为道具可用，则需要在 mapDispatchToProps 实现中自己明确返回它。你可以在 react-redux 的 FAQ Section 阅读它。

另外，如果你想尝试实验性的decorator 功能，你可以使用 babel 来使用它。在这种情况下，您可以使用@connect 连接您的组件，如下所示。

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

【讨论】：