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

如您所见，导出组件时，他们的代码最后使用了compose。我无法修改其建筑结构。我现在想做的就是也喜欢使用react的connect功能。

通常使用connect代替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 doesn't get rid of the pattern of passing a function to the result of a function call, but it reduces its use to one.

Only one HOC, no gain from using 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)

Note that starting another function call immediately after a function call, which only recently came into fashion, is still there with compose.

With two HOCs there is a gain from compose because the nesting of parens is less:

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

This still can be hard to follow if you aren't used to a nameless function being called immediately after it's created. If you prefer you can give a name to it:

// two HOCs, with compose
const enhance = compose(connect(mapStateToProps, mapDispatchToProps, withStyles(styles));
// export default enhance(MyComponent);

I prefer to use compose when there is more than one HOC, and to use it directly. I think cutting down on the nesting is useful but giving it a generic name like enhance is unnecessary.

Answer 4

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

Answer 5

在将let storyboard = UIStoryboard(name: "NAMEOFYOURSTORYBOARD", bundle: nil) let vc = storyboard.instantiateViewController(withIdentifier: "IDOFYOURVIEW") as! CheckoutVC vc.tableViewDayTransferedData = self. tableViewDay self.navigationController!.pushViewController(vc, animated: true)与Typescript一起使用时，出现以下错误： compose

我必须通过以下方式添加JSX element type 'App' does not have any construct or call signatures. TS2604才能使其正常工作：

ComponentType

在React JS redux中一起使用compose（）和connect（）

5 个答案: