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

Question

谁能告诉我如何将我们的常规dispatch Redux store 方法像道具一样直接发送到组件。请参阅下面的示例。

附： 我还看到了 Dan Abramov https://github.com/reactjs/redux/issues/916 使用 functional component 的这个例子，但没有找到答案有没有办法让它抛出 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

您可以使用 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
    }
}

Answer 3

建议任何调度的动作都应该返回一个纯对象，这里你的addData 不是返回一个对象。像这样写下你的动作：

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

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