Как использовать mapDispatchToProps

Question

Я изучаю Redux React. Как использовать mapDispatchToProps? Мой код как показано ниже

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { getAddress } from '../store/actions/addressActions';

class Dashboard extends Component {
    componentDidMount = () => {
        this.props.getAddress();
    };

    render() {
        return <div>Hello { console.log(this.props) } </div>;
    }
}

const mapStateToProps = state => ({
    address: state.address
});

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

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Dashboard);

Я получаю вывод консоли, как показано ниже

Где я делаю ошибку? Как правильно использовать mapDispatchToProps?

Answer 1

Либо вы определяете mapDispatchToProps как object, либо вы возвращаете отправленную функцию из mapDispatchToProps вместо объекта

При первом подходе ваш mapStateToProps будет выглядеть как

const mapDispatchToProps = {
    getAddress
};

При втором подходе это выглядело бы как

const mapDispatchToProps = dispatch => ({
    getAddress: (...args) => dispatch(getAddress(...args));
});

Кроме того, поскольку вы используете combineReducers, вам нужно изменить способ доступа к состоянию в mapStateToProps

const mapStateToProps = state => ({ address: state.addressReducer.address });

Answer 2

Я думаю, что изначально в store значение address равно undefined.правильный?и действие getAddress установит значение адреса.

Вот что вы пропустили: 1) вы отправили действие.Вы можете использовать любой из следующих

const mapDispatchToProps = dispatch => ({
    getAddress: (...args) => dispatch(getAddress(...args));
});

или

import { bindActionCreators } from "redux";

    const mapDispatchToProps = dispatch => bindActionCreators({getAddress}, dispatch)

Answer 3

Вам следует немного обновить метод mapDispatchToProps.Кроме того, вы должны экспортировать его в письменной форме теста.

import { bindActionCreators } from 'redux';

export const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators(
    getAddress,
    dispatch,
  ),
})