如何將調度傳遞到像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
    }
}