How to pass the dispatch into the component like prop?

Question

can anyone say me how we can send our regular dispatch Redux store method directly to the component like props. See example below.

PS I also saw this example from Dan Abramov https://github.com/reactjs/redux/issues/916 by using functional component , but did not find an answer is there some way to make it throw the class component ?

import React, { Component } from 'react';
import { connect } from 'react-redux';

function addData(data) {
    type: "ADD_DATA",
    data
};

class MainComponent extends Component {
    constructor({ dispatch }, props) {
        super(props);
    }

    handleUpdate = () => {
        const hi = 'hi';
        dispatch(addData(hi)); // error, could not find the method
    }

    render() {
        const { data } = this.props;
        console.log(this.props.store);
        return (
            <div>
                <button onClick={this.handleUpdate}>Click me!</button>
                {data}
            </div> 
        )
    }
}

export default connect()(MainComponent);

Answer 1

In your connect() method, you can pass in a function which will map dispatch to your props;

So try;

const mapDispatchToProps = (dispatch) => ({
    dispatch
});

export default connect({}, mapDispatchToProps)(MainComponent);

Then in your component you should have access to dispatch within the props.

Your component constructor can just be;

constructor(props) {
    super(props);
}

Or dropped completely as you are not doing anything else within it.

Answer 2

It is recommended that any dispatched action should return a pure object, here your addData is not returning an object. Write your actions like this:

function addData(data) {
  return {
    type: "ADD_DATA",
    data
  }
};

You can also look into the mapStateToProps and mapDispatchToProps objects returned as the first 2 parameters in your connect method. They give you more flexibility in how you want to lay out your props. See the documentation here: Redux API

Answer 3

You can a mapDispatchToProps, and add the dispatch to the props of your component. Just like this:

class MainComponent extends Component {
    constructor(props) {
     super(props);
    }

    handleUpdate = () => {
        const hi = 'hi';
        this.props.add(hi)
    }

    render() {
        const { data } = this.props;
        return (
            <div>
                <button onClick={this.handleUpdate}>Click me!</button>
                {data}
            </div> 
        )
    }
}

const mapDispatchToProps = dispatch => {
    return {
        add : (data) => dispatch(addData(data))
    }
}

export default connect({},mapDispatchToProps)(MainComponent);

The mapDispatchToProps receives the dispatch parameter from connect() , and links it to your component. Then, just pass it as a parameter to connect()

Your addData() should return a plain object, like this:

function addData(data) {
    return {
        type: "ADD_DATA",
        data
    }
}