Как передать отправку в компонент, как реквизит?

Question

Может кто-нибудь сказать мне, как мы можем отправить наш обычный dispatch Redux store метод напрямую к компоненту, подобному реквизиту. Смотрите пример ниже.

P.S. Я также видел этот пример от Дана Абрамова 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

Вы можете 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 2

Рекомендуется, чтобы любое отправленное действие возвращало чистый объект, здесь ваш addData не возвращает объект. Напишите свои действия так:

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

Вы также можете просмотреть объекты mapStateToProps и mapDispatchToProps, возвращенные в качестве первых 2 параметров в вашем методе соединения. Они дают вам больше гибкости в том, как вы хотите выложить свои реквизиты. Смотрите документацию здесь: Redux API

Answer 3

В вашем методе connect() вы можете передать функцию, которая отобразит диспетчеризацию на ваш реквизит;

Так что попробуйте;

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

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

Тогда в вашем компоненте у вас должен быть доступ к dispatch внутри реквизита.

Ваш конструктор компонента может быть просто;

constructor(props) {
    super(props);
}

Или полностью отброшен, поскольку вы больше ничего не делаете внутри него.