如何将调度传递到像prop这样的组件中？

Question

谁能说我如何将常规dispatch Redux存储方法直接发送到props这样的组件。 请参见下面的示例。

PS我也通过使用functional component从Dan Abramov https://github.com/reactjs/redux/issues/916看到了这个示例，但是没有找到答案，有没有办法使它抛出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

在connect()方法中，您可以传入一个函数，该函数会将调度映射到道具。

所以尝试

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

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

然后，在您的组件中，您应该可以在道具内进行dispatch 。

您的组件构造函数可以是：

constructor(props) {
    super(props);
}

或完全放弃，因为您没有在其中执行任何其他操作。

Answer 2

建议任何分派的操作都应返回一个纯对象，此处您的addData不返回对象。 这样写你的动作：

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

您也可以查看在connect方法中作为前两个参数返回的mapStateToProps和mapDispatchToProps对象。 它们使您可以更灵活地布置道具。 请参阅此处的文档： Redux API

Answer 3

您可以使用mapDispatchToProps，并将分派添加到组件的props中。 像这样：

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

mapDispatchToProps从connect()接收dispatch参数，并将其链接到您的组件。 然后，只需将其作为参数传递给connect()

您的addData()应该返回一个普通对象，如下所示：

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