如何使用mapDispatchToProps

时间:2019-03-26 06:31:42

标签: redux react-redux redux-thunk

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

我正在获得如下控制台输出

enter image description here

我在哪里做错了?如何正确使用mapDispatchToProps?

3 个答案:

答案 0 :(得分:2)

要么将mapDispatchToProps定义为object,要么从mapDispatchToProps返回调度的函数,而不是返回对象

使用第一种方法,您的mapStateToProps看起来像

const mapDispatchToProps = {
    getAddress
};

使用第二种方法,看起来像

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

此外,由于您使用的是combineReducers,因此您需要更改访问mapStateToProps中的状态的方式

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

答案 1 :(得分:1)

我认为最初在store中,addressundefined。正确?然后getAddress操作将设置地址值。

这是您错过的地方, 1)您已调度动作。您可以使用以下任何一种方式

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

import { bindActionCreators } from "redux";

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

答案 2 :(得分:0)

您应该稍微更新mapDispatchToProps方法。另外,您应该将其导出以进行写作测试。

import { bindActionCreators } from 'redux';

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