CODEWITHSUNDEEP
javascriptreactjsreduxreact-redux
Martin Fahl
Martin Fahl

Reputation: 947

Map dispatch function to properties with react-redux

How can you access dispatch functions passed to a component via the react-redux connect method? If I try to access the callback via this.props. the function is not found. The following errors are displayed: Required prop onDataUpdated was not specified in EditTable and TypeError: this.props.onDataUpdated is not a function

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;

Upvotes: 1

Views: 1051

Answers (2)

Dmitriy Nevzorov
Dmitriy Nevzorov

Reputation: 6078

connect method has the following signature:
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

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

You need to pass your mapDispatchToProps function as a second argument

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

More info in the docs

You also declare mapDispatchToProps with const after you use it. It is undefined when you call connect method. const and let are not hoisted up to the top of the document, it means that you can not define them after you use them.

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

Upvotes: 2

anvk
anvk

Reputation: 1201

I suggest you to watch a video on how to write connect functions by Dan Abramov himself Redux: Generating Containers with connect(). He does a very good job describing on how to create connect functions and how to structure your Redux application in a more reasonable and proper way. This 5 minute video should point you to mistakes you made and explain how connect function works.

Upvotes: 0

Related Questions