如何使用Redux正确实现mapStateToProps？

Question

我正在尝试做一些非常简单的事情:每次单击按钮时,此组件中的"当前"值:https://github.com/conorhastings/react-thermometer会增加.

问题是,当我构建时,控制台抛出以下错误:模块构建失败:SyntaxError:意外的令牌,预期((29:11)

在这一行:

function mapStateToProps(state){

这是我的容器的整个代码:

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

为了以防万一,这是我的webpack配置:

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

将函数放在类外:

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

您正在将组件的定义传递给返回的函数connect,因此您不会在任何时候创建该类的实例.的mapStateToProps和mapDispatchToProps完全独立的类,和任何实例之前用来Thermo制成.因此你需要把它们放在外面.