Question

我正在使用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>
        );
    }

}

当我处理sunSumbit部分时 - 调度未定义。当我调试这个时，即使在RecordForm的构造中，也有n o在道具中发送或任何相关的形式。我应该添加一些像connect（）的注释吗？我错过了什么？

Answer 1

您需要使用connect()功能连接组件。如react-redux docs中所述，您可以使用connect()而无需任何参数。

从提供的链接中引用：

注入只是发送，不要听商店

export default connect（）（TodoApp）

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

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

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

react-redux-form - dispatch不在props中传递

1 个答案: