如何使用 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，要么将 return 来自 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,
  ),
})

如何使用 mapDispatchToProps

How to use mapDispatchToProps

redux

redux-thunk

react-redux