react-redux-form - 调度不会在 props 中传递



我正在使用react-redux-forms,按照快速入门,我创建了反应组件:

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

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 的构建器中,道具或任何与形式相关的内容中也没有调度。我应该添加一些像 connect(( 这样的注释吗?我错过了什么?

您需要使用connect()函数连接组件。正如 react-redux 文档中提到的,您可以在没有任何参数的情况下使用 connect()

引用提供的链接:

注入只调度,不听商店

导出默认连接(((TodoApp(

但是,如果您提供自定义mapDispatchToProps函数作为参数,则不会向您提供调度。如果您仍然希望它作为 props 提供,则需要在 mapDispatchToProps 实现中自己显式返回它。您可以在 react-redux 的常见问题解答部分阅读有关它的信息。

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

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

最新更新