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

时间:2016-07-20 13:15:37

标签: javascript reactjs redux react-redux

如何通过react-redux连接方法访问传递给组件的调度函数?如果我尝试通过this.props访问回调。找不到该功能。显示以下错误: onDataUpdated TypeError中未指定必需的道具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;

2 个答案:

答案 0 :(得分:2)

[ngClass]="{'has-warning':expression1 && expression2,'has-danger':(expression3 && expression4) || expression5 || (expression6 && expression7) || expression8}" 方法具有以下签名:
connect

  1. connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
  2. [mapStateToProps(state, [ownProps]): stateProps] (Function)
  3. 您需要将[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function)函数作为第二个参数

    传递
    mapDispatchToProps

    docs

    中的更多信息

    使用后,您还可以const ConsumerIDEditTable = connect( null, mapDispatchToProps )(EditTable) 声明mapDispatchToProps。当您调用const方法时,undefinedconnectconst没有悬挂到文档的顶部,这意味着您在使用它们后无法定义它们。

    let

答案 1 :(得分:0)

我建议您观看Dan Abramov自己Redux: Generating Containers with connect()如何撰写connect函数的视频。他非常好地描述了如何创建连接函数以及如何以更合理和正确的方式构建Redux应用程序。 这段5分钟的视频应该指出你犯的错误,并解释connect功能如何运作。