如何使用 mapDispatchToProps答案

【问题标题】：How to use mapDispatchToProps如何使用 mapDispatchToProps
【发布时间】：2019-03-26 06:31:41
【问题描述】：

我正在学习 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？

【问题讨论】：

在没有看到代码的情况下很难推断getAddress action 的作用。它是否应该获取地址并将其放入状态？问题可能存在。
感谢@dev-null 的回复。这是地址操作。 import Axios from 'axios'; export const getAddress = () => dispatch => { return Axios.get('/api/address') .then(response => { dispatch({ type: 'getAddresses', payload: response.data }); }) .catch(function(error) { console.log(error); }); } export default { getAddress };

标签： redux react-redux redux-thunk

【解决方案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 });

【讨论】：

由于您在 componentDidMount 中调用 action creator，地址最初是未定义的，但稍后应该返回您正确访问状态的正确值。您是否在代码中使用 combineReducers。还有更新地址的reducer是什么样的
您的 mapStateToProps 必须是 const mapStateToProps = state => ({ address: state.addressReducer.address }); 。那么除了上述mapDispatchToProps的变化
@abuabu 正如我之前所说，由于您在 componentDidMount 中调度了一个动作，因此对于第一次渲染，地址将包含 reducer 中的初始值，一旦数据更新，更新后的值将可见
在render方法里面，return null是addresses字段不是指定的类型
你会写render() { if(Object.keys(this.props.address) === 0) { return null} return <div>Hello {console.log(this.props)}</div>; }

【解决方案2】：

我认为，最初在store 中，address 是undefined。正确的？ getAddress 操作将设置地址值。

这是你错过的， 1）你已经派出行动。您可以使用以下任何一种

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

或

import { bindActionCreators } from "redux";

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

【讨论】：

感谢@Harish 的解决方案。但是您的解决方案不起作用。

【解决方案3】：

您应该稍微更新mapDispatchToProps 方法。另外，你应该把它导出到写作测试中。

import { bindActionCreators } from 'redux';

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

【讨论】：

感谢@Vu Luu 的解决方案。但是您的解决方案不起作用。