javascript - How to pass the dispatch into the component like prop? - Stack Overflow

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

P.S. I also saw this example from Dan Abramov by using functional ponent, but did not find an answer is there some way to make it throw the class ponent?

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

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

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

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

• javascript
• reactjs
• redux
• react-redux

Share Improve this question Follow edited Apr 30, 2018 at 15:45 isherwood 61.2k1616 gold badges121121 silver badges170170 bronze badges asked Apr 30, 2018 at 15:37 Max WolfenMax Wolfen 2,04366 gold badges2727 silver badges4242 bronze badges 3

• Your code should already have dispatch as prop. You're trying to log store. Dan's example is for class ponent and covers your use case. If I understand your question correctly – Andrey Commented Apr 30, 2018 at 15:43
• 1 change dispatch(addData(hi)) to this.props.dispatch(addData(hi)) – azium Commented Apr 30, 2018 at 15:43
• azium has your answer. You're trying to leverage dispatch directly, but it is a property of the props object. – Alexander Nied Commented Apr 30, 2018 at 15:44

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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 ponent you should have access to dispatch within the props.

Your ponent constructor can just be;

constructor(props) {
    super(props);
}

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

It is remended 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

You can a mapDispatchToProps, and add the dispatch to the props of your ponent. 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 ponent. 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
    }
}