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