Question

任何人都可以告诉我如何将常规的dispatch Redux商店方法直接发送到像props这样的组件。见下面的例子。

P.S。我还使用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
  }
};

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

Answer 3

您可以使用mapDispatchToProps，并将调度添加到组件的道具中。就像这样：

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()接收调度参数，并将其链接到您的组件。然后，将其作为参数传递给connect()

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

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

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

3 个答案: