在React JS redux中一起使用compose()和connect()

Question

我开始使用React JS开发Web应用程序.我从主题森林买了一个主题.在主题中,他们在组件中使用这样的组合.

...Other code here
 Login.propTypes = {
      classes: PropTypes.shape({}).isRequired,
      width: PropTypes.string.isRequired
    };

    export default compose(withWidth(), withStyles(themeStyles, { withTheme: true }))(Login);

正如您所看到的,他们的代码在导出Component时最终使用了compose.我不能修改他们的内置结构.我现在喜欢做的是我也喜欢使用反应的连接功能.

通常连接用于撰写.现在,如果我想使用connect来处理应用程序的状态,我该如何将它与compose一起使用？

Answer 1

const enhance = compose(
    withRouter,
    withStyles(styles, 'some style'),
    connect(mapStateToProps, mapDispatchToProps),
    ....

export default enhance(MyComponent);

Answer 2

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);

我希望这能解决您的问题。

Answer 3

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是不必要的。