在React JS redux中同时使用compose()和connect()
我开始使用React JS开发web应用程序。我从主题森林买了一个主题。在主题中，他们在组件中像这样使用compose。
...Other code here
Login.propTypes = {
classes: PropTypes.shape({}).isRequired,
width: PropTypes.string.isRequired
};
export default compose(withWidth(), withStyles(themeStyles, { withTheme: true }))(Login);正如您所看到的，在导出组件时，他们的代码在末尾使用了compose。我不能修改他们的内置结构。我现在想做的是，我也喜欢使用react的连接功能。
Normally用来代替connect。现在，如果我想使用connect来处理应用程序的状态，我如何将其与compose一起使用？
回答 5
Stack Overflow用户
发布于 2018-07-10 20:39:35
const enhance = compose(
withRouter,
withStyles(styles, 'some style'),
connect(mapStateToProps, mapDispatchToProps),
....
export default enhance(MyComponent);Stack Overflow用户
发布于 2018-07-10 20:47:31
import {bindActionCreators} from 'redux';
import compose from 'recompose/compose';
import { connect } from 'react-redux';
...Other code here
function mapStateToProps(state) {
return {
//return state
}
}
function mapDispatchToProps(){
return bindActionCreators({
//actions
}, dispatch);
}
Login.propTypes = {
classes: PropTypes.shape({}).isRequired,
width: PropTypes.string.isRequired
};
export default compose(withWidth(), withStyles(styles, {withTheme: true}), connect(mapStateToProps, mapDispatchToProps))(Login);我希望这能解决你的问题。
Stack Overflow用户
发布于 2019-04-17 08:08:00
compose没有摆脱将函数传递给函数调用结果的模式，但它将其使用减少为一种。
只有一个点，使用compose没有任何好处：
// withStyles, without compose
export default withStyles(styles)(MyComponent)
// withStyles, with compose
export default compose(withStyles(styles))(MyComponent)
// connect, without compose
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent)
// connect, with compose
export default compose(connect(mapStateToProps, mapDispatchToProps))(MyComponent)请注意，在函数调用之后立即启动另一个函数调用，这是最近才流行起来的，在compose中仍然存在。
对于两个HOC，compose有一个好处，因为parens的嵌套更少：
// two HOCs, without compose
export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(MyComponent))
// two HOCs, with compose
export default compose(connect(mapStateToProps, mapDispatchToProps), withStyles(styles))(MyComponent)如果你不习惯一个无名函数在创建后立即被调用，这仍然很难理解。如果你愿意，你可以给它一个名字：
// two HOCs, with compose
const enhance = compose(connect(mapStateToProps, mapDispatchToProps, withStyles(styles));
// export default enhance(MyComponent);当有多个HOC时，我更喜欢使用compose，并且直接使用它。我认为减少嵌套是有用的，但没有必要给它起一个像enhance这样的通用名称。
https://stackoverflow.com/questions/51265319
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号