使用react-redux将调度功能映射到属性

Question

如何通过react-redux connect方法访问传递给组件的调度函数？ 如果我尝试通过this.props访问回调。 找不到功能。 显示以下错误： 必需道具onDataUpdated在未指定EditTable和类型错误：this.props.onDataUpdated不是一个函数

ConsumerIDManagement.js

import { connect } from 'react-redux'
var React = require('react');
var EditTable = require("../components/EditTable");

const ConsumerIDEditTable = connect(
  mapDispatchToProps
)(EditTable)

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    onDataUpdated: (oldRow,newRow) => {
      dispatch({ oldRow: oldRow, newRow: newRow,type: "onRowUpdated"})
    }
  }
}

<ConsumerIDEditTable data={this.state.data} editableColumns={["consumerID"]}/>

EditTable.js

var React = require('react');
var ReactDataGrid = require('react-data-grid');
var ResultFormatter = require("../components/ResultFormatter");

var EditTable = React.createClass({
    propTypes: {
        onDataUpdated: React.PropTypes.func.isRequired
    },
    ...
    handleRowUpdated : function(e){
        var rows = this.state.rows;

        // inform dispatcher of changed data
        this.props.onDataUpdated(rows, e.updated);
    },
    ...
    },

    render:function(){
        return (
            <ReactDataGrid
                ...
                onRowUpdated={this.handleRowUpdated} />
        )       
    }

});


module.exports = EditTable;

Answer 1

connect方法具有以下签名：
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

1. [mapStateToProps(state, [ownProps]): stateProps] (Function)
2. [mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function)

您需要将mapDispatchToProps函数作为第二个参数传递

const ConsumerIDEditTable = connect(
  null, mapDispatchToProps
)(EditTable)

文档中的更多信息

使用mapDispatchToProps ， mapDispatchToProps要用const声明mapDispatchToProps 。 调用connect方法时undefined 。 const和let不会提升到文档的顶部，这意味着使用它们后就无法定义它们。

 const value1 = 'value1'; console.log(value1, value2) const value2 = 'value2'; 

Answer 2

我建议您观看由Dan Abramov亲自撰写的有关如何编写connect函数的视频Redux：使用connect（）生成容器 。 他在描述如何创建连接函数以及如何以更合理和适当的方式构造Redux应用程序方面做得非常出色。 这个5分钟的视频应指出您犯的错误，并说明connect功能的工作原理。