Material-UIのwithStyleとreacrt-reduxのconnectを同時に使う

Material-UIのwithStyleとreacrt-reduxのconnect

react-reduxを利用しているアプリにMaterial-UIのstylesを組み込む、もしくはその逆を行うときに、どのようにすれば分からなかったので書いておきます。

connectを使用したコンポーネント↓

import React from 'react'
import { connect } from 'react-redux'

const SampleComponent = () => {
  // 略
}

const mapStateToProps = (state) => ({
  // 略
})

const mapDispatchToProps = (dispatch) => ({
  // 略
})

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(SampleComponent)

と

withStylesを使用したコンポーネント↓

import React from 'react'
import { withStyles } from '@material-ui/core/styles'

const SampleComponent = () => {
  // 略
}

const styles = theme => ({
  // 略
})

export default withStyles(styles)(SampleComponent)

を、同時に使いたい。

composeを使う

reduxのcompose関数を使用すると、withStyleとconnectを同時に使用することができます。

import React from 'react'
import { compose } from 'redux'
import { connect } from 'react-redux'
import { withStyles } from '@material-ui/core/styles'

const SampleComponent = () => {
  // 略
}

const styles = theme => ({
  // 略
})

const mapStateToProps = (state) => ({
  // 略
})

const mapDispatchToProps = (dispatch) => ({
  // 略
})

export default compose(
  withStyles(styles),
  connect(
    mapStateToProps,
    mapDispatchToProps
))(SampleComponent)

composeを使わない場合

compose関数は、関数を合成してくれる関数です。合成とは、”他の関数の戻り値”を入力とする関数を作成することです。 例えば、compose(a, b)(x)は、a(b(x))と同じ意味になります。

composeを使わない場合は以下のように書くことができます。

// 略

export default withStyles(styles)(
  connect(
    mapStateToProps,
    mapDispatchToProps
  )(SampleComponent)
)

composeを使うよりネストが深くなりました。

バージョン

• react: 16.5.0
• react-redux: 5.0.7
• redux: 4.0.0
• @material-ui/core: 3.4.0