我正在学习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?
答案 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
中,address
是undefined
。正确?然后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,
),
})