web-dev-qa-db-fra.com

Utilisation de compose () et connect () ensemble dans React JS redux

Je commence à développer une application Web en utilisant React JS. J'ai acheté un thème dans la forêt de thèmes. Dans le thème, ils utilisent la composition comme celle-ci dans le composant.

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

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

Comme vous pouvez le voir, leur code utilise la composition à la fin lors de l'exportation du composant. Je ne peux pas modifier leur structure bâtie. Ce que j'aime faire maintenant, c'est que j'aime aussi utiliser la fonction de connexion de React.

Normalement, connect est utilisé à la place de composer. Maintenant, si je veux utiliser connect pour travailler avec l'état de l'application, comment puis-je l'utiliser avec compose?

reactjsreduxreact-reduxrecompose
12
Wai Yan Hein
const enhance = compose(
    withRouter,
    withStyles(styles, 'some style'),
    connect(mapStateToProps, mapDispatchToProps),
    ....

export default enhance(MyComponent);
21
Safi Nettah
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);

J'espère que cela résoudra votre problème.

5
Gaurav Bharti
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);
0
David Bagdasaryan

compose ne supprime pas le modèle de passage d'une fonction au résultat d'un appel de fonction, mais il réduit son utilisation à un.

Un seul HOC, aucun gain en utilisant la composition:

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

Notez que démarrer un autre appel de fonction immédiatement après un appel de fonction, qui n'est apparu que récemment, est toujours là avec compose.

Avec deux HOC, il y a un gain de compose parce que l'imbrication des parens est moindre:

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

Cela peut toujours être difficile à suivre si vous n'êtes pas habitué à ce qu'une fonction sans nom soit appelée immédiatement après sa création. Si vous préférez, vous pouvez lui donner un nom:

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

Je préfère utiliser la composition lorsqu'il y a plusieurs HOC et l'utiliser directement. Je pense que réduire l'imbrication est utile mais lui donner un nom générique comme enhance n'est pas nécessaire.

0
Benjamin Atkin