我开始使用 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 的连接功能。
通常用connect代替compose。现在，如果我想使用 connect 来处理应用程序的状态，我如何将它与 compose 一起使用？
const enhance = compose(
withRouter,
withStyles(styles, 'some style'),
connect(mapStateToProps, mapDispatchToProps),
....
export default enhance(MyComponent);
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);
我希望这能解决你的问题。
compose 没有摆脱将函数传递给函数调用结果的模式，但它减少了它的使用。
只有一个 HOC，使用 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因为括号的嵌套更少：
// 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是不必要的。
我在使用composeTypescript时收到以下错误：
JSX element type 'App' does not have any construct or call signatures. TS2604
我必须以ComponentType以下方式添加才能使其工作：
export default compose<ComponentType>(withTranslation(), connect(mapStateToProps, mapDispatchToProps))(App);
import {connect} from "react-redux";
import {compose} from 'redux'
class BookList extends Component {
componentDidMount() {
const {bookstoreService} = this.props;
const data = bookstoreService.getBooks();
this.props.booksLoaded(data);
}
render() {
const {books} = this.props;
return (
<ul>
{books.map(book => {
return (
<li key={book.id}>
<BookListItem book={book}/>
</li>
);
})}
</ul>
);
}
}
const mapStateToProps = ({books}) => {
return {books};
};
const mapDispatchToProps = dispatch => {
return {
booksLoaded: newBooks => {
dispatch(booksLoaded(newBooks));
}
};
};
export default compose(withBookstoreService(), connect(mapStateToProps, mapDispatchToProps))(BookList);