reactjs - 如何使用Redux正确实现mapStateToProps？

Question

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

问题是，当我构建时，控制台会抛出以下错误:模块构建失败:语法错误:意外的 token ，预期 ((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 的任何实例之前使用。因此你需要把它们放在外面。