使用 react-redux 将调度函数映射到属性

Question

如何访问通过 react-redux connect 方法传递给组件的调度函数？如果我尝试通过 this.props 访问回调。找不到该功能。显示以下错误：Required prop onDataUpdated was not specified in EditTable and TypeError: this.props.onDataUpdated is not a函数

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])

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

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

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

更多信息在 docs

你在使用后还声明了 mapDispatchToProps 和 const。当你调用 connect 方法时，它是 undefined。 const 和 let 没有被顶到文档的顶部，这意味着你使用它们之后就不能再定义它们了。

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

Answer 2

我建议您观看 Dan Abramov 本人 Redux: Generating Containers with connect() 编写 connect 函数的视频。他很好地描述了如何创建连接函数以及如何以更合理和正确的方式构建您的 Redux 应用程序。这段 5 分钟的视频应该会指出您所犯的错误，并解释 connect 函数的工作原理。

使用 react-redux 将调度函数映射到属性

Map dispatch function to properties with react-redux

javascript

reactjs

redux

react-redux