forms - react-redux-form - 调度未在 props 中传递

Question

我正在使用react-redux-forms和以下 quick start我创建了 react 组件:

此类包含存储定义和提供程序

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

}

当我开始处理Sumbit 部分时 - 调度未定义。当我调试这个时，即使在 RecordForm 的构造函数中， Prop 或与表单相关的任何内容也没有调度。我应该添加一些注释，例如 connect() 吗？我错过了什么？

Answer 1

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

引用所提供的链接:

Inject just dispatch and don't listen to store

export default connect()(TodoApp)

但是，如果您提供自定义 mapDispatchToProps 函数作为参数，则不会向您提供调度。如果您仍希望将其用作 props，则需要在 mapDispatchToProps 实现中自行显式返回它。您可以在FAQ Section中阅读相关内容。在react-redux。

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

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