默认情况下mapDispatchToProps
只是dispatch => ({ dispatch })
.
因此,如果您不指定第二个参数connect()
, 你会得到dispatch
作为组件中的道具注入。
如果您将自定义函数传递给mapDispatchToProps
,你可以用这个函数做任何事情。
举几个例子:
// inject onClick
function mapDispatchToProps(dispatch) {
return {
onClick: () => dispatch(increment())
};
}
// inject onClick *and* dispatch
function mapDispatchToProps(dispatch) {
return {
dispatch,
onClick: () => dispatch(increment())
};
}
为了节省您的打字时间,Redux 提供了bindActionCreators()
这可以让你把这个:
// injects onPlusClick, onMinusClick
function mapDispatchToProps(dispatch) {
return {
onPlusClick: () => dispatch(increment()),
onMinusClick: () => dispatch(decrement())
};
}
进入这个:
import { bindActionCreators } from 'redux';
// injects onPlusClick, onMinusClick
function mapDispatchToProps(dispatch) {
return bindActionCreators({
onPlusClick: increment,
onMinusClick: decrement
}, dispatch);
}
当道具名称与动作创建者名称匹配时甚至更短:
// injects increment and decrement
function mapDispatchToProps(dispatch) {
return bindActionCreators({ increment, decrement }, dispatch);
}
如果您愿意,您绝对可以添加dispatch
用手在那里:
// injects increment, decrement, and dispatch itself
function mapDispatchToProps(dispatch) {
return {
...bindActionCreators({ increment, decrement }), // es7 spread syntax
dispatch
};
}
没有官方建议您是否应该这样做。connect()
通常充当 Redux 感知组件和 Redux 不感知组件之间的边界。这就是为什么我们通常会觉得注入没有意义both绑定动作创建者和dispatch
。但如果您觉得有必要这样做,请随意。
最后,您现在使用的模式是一个比调用更短的快捷方式bindActionCreators
。当你所做的一切就是回归bindActionCreators
,您可以省略该调用,而不是这样做:
// injects increment and decrement
function mapDispatchToProps(dispatch) {
return bindActionCreators({ increment, decrement }, dispatch);
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(App);
可以写成这样
export default connect(
mapStateToProps,
{ increment, decrement } // injects increment and decrement
)(App);
但是,每当您想要更自定义的东西(例如传递dispatch
以及。