How to properly implement mapStateToProps using Redux?

Question

I'm trying to do something really simple: Each time you click a button the value of 'current' in this component: https://github.com/conorhastings/react-thermometer increases.

The problem is that when I build, the console throws the following error: Module build failed: SyntaxError: Unexpected token, expected ( (29:11)

in this line:

function mapStateToProps(state){

Here's the entire code of my container:

import React, {Component} from 'react';
import Thermometer from "react-thermometer";
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {incrementValue} from '../actions/index';

class Thermo extends Component{
  getValue(){
    return this.props.val;
  }

  render(){
    return(
          <div>
              <Thermometer
                      min={0}
                      max={90}
                      width={10}
                      height={90}
                      backgroundColor={'gray'}
                      fillColor={'pink'}
                      current={this.getValue()}
              />
              <Button onClick={() => this.props.incrementValue(val)}>+</Button>
          </div>
    )
  }

  function mapStateToProps(state){
    return{
      val: state.val
    };
  }

  function matchDispatchToProps(dispatch){
    return bindActionCreators({incrementValue: incrementValue}, dispatch);
  }
}

export default connect(mapStateToProps, matchDispatchToProps)(Thermo);

And just in case, this is my webpack config:

var path = require('path');
var webpack = require('webpack');

module.exports = {
    devServer: {
        inline: true,
        contentBase: './src',
        port: 3000
    },
    devtool: 'cheap-module-eval-source-map',
    entry: './dev/js/index.js',
    module: {
        loaders: [
            {
                test: /\.js$/,
                loaders: ['babel'],
                exclude: /node_modules/
            },
            {
                test: /\.scss/,
                loader: 'style-loader!css-loader!sass-loader'
            }
        ]
    },
    output: {
        path: 'src',
        filename: 'js/bundle.min.js'
    },
    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin()
    ]
};

Answer 1

Put the functions outside the class:

import React, {Component} from 'react';
import Thermometer from "react-thermometer";
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {incrementValue} from '../actions/index';

class Thermo extends Component{
  getValue(){
    return this.props.val;
  }

  render(){
    return(
          <div>
              <Thermometer
                      min={0}
                      max={90}
                      width={10}
                      height={90}
                      backgroundColor={'gray'}
                      fillColor={'pink'}
                      current={this.getValue()}
              />
              <Button onClick={() => this.props.incrementValue(val)}>+</Button>
          </div>
    )
  }


}

function mapStateToProps(state){
    return{
      val: state.val
    };
  }

  function mapDispatchToProps(dispatch){
    return bindActionCreators({incrementValue: incrementValue}, dispatch);
  }

export default connect(mapStateToProps, matchDispatchToProps)(Thermo);

You are passing the definition of your component to the function returned by connect, hence you don't make an instance of that class at any time. The mapStateToProps and mapDispatchToProps are completely independent of your class, and are used before any instance of Thermo is made. Thus you need to have them outside.

Answer 2

Move the function definitions outside the Component class

class Thermo extends Component {
    // ... component things
}

function mapStateToProps(state){
    return{
      val: state.val
    };
}

function matchDispatchToProps(dispatch){
    return bindActionCreators({incrementValue: incrementValue}, dispatch);
}

export default connect(mapStateToProps, matchDispatchToProps)(Thermo);

---

Since you're using ES6, we have better sugary way of writing connect.

class Thermo extends Component {
    // ... component things
}

export default connect(
    (state) => ({ val: state.val }),
    { incrementValue }
)(Thermo);

ie you actually don't need mapStateToProps and matchDispatchToProps.