高次コンポーネントの結合方法は？

Question

高次コンポーネントをきれいに組み合わせるにはどうすればよいですか？現在、私はこのようなものを持っており、クリーン結合する方法とがなければならないcomponse HOCの

const appWithWidth = withWidth()(App); 

const appWithReduxAndWidth = connect(mapStateToProps, mapDispatchToProps)(appWithWidth); 

const appWithRouterAndCookiesAndReduxAndWidth = withRouter(withCookies(appWithReduxAndWidth)); 

export default appWithRouterAndCookiesAndReduxAndWidth; 

Answer 1

はい、recomposeは、このための偉大なライブラリです。

例えば、composeを使用します。

は

export default compose(
    withWidth(all_the_cookie_width), 
    withCookies, 
    withMilk, 
    withHoldTheSprinkles 
)(App); 

Answer 2

あなたが複数の高次成分を組み合わせたrecomposeからcomposeを使用することができます。

import { compose } from 'recompose' 

export default compose(
    withWidth, 
    connect(mapStateToProps, mapDispatchToProps), 
    withCookies, 
    withRouter 
)(App) 

Answer 3

あなたはReduxのに含まれてcomposeを使用することができます。

import { compose } from 'redux'; 

export default compose(
    withRouter, 
    withCookies 
    connect(mapStateToProps, mapDispatchToProps), 
    withWidth() 
)(App);