Redux、Provider 和装饰器答案

【问题标题】：Redux, Provider and decoratorsRedux、Provider 和装饰器
【发布时间】：2017-02-14 04:36:01
【问题描述】：

我是 redux 的新手，我正在尝试用它构建我的应用程序。我创建了减速器文件、组合减速器文件、组件、动作等但是当我启动我的服务器时，我得到 Unexpected token 其中调用了 @connect()。

让我们看看我的代码：

Main.js

 ...
 import { Provider } from "react-redux";
 ...
 ReactDOM.render(
    <Provider store={store}>
        <Router history={history}>{routes}</Router>
    </Provider>, 
    document.getElementById('app')
 );

Login.js

...
@connect((store) => {
  return {
    modal: store.showModal,
  };
})

class ModalLogin extends React.Component {
 ...
}

webpack.config.js

module.exports = {
   context: path.join(__dirname, "app"),
   devtool: debug ? "inline-sourcemap" : null,
   entry: "./main.js",
   module: {
     loaders: [
       {
         test: /\.jsx?$/,
         exclude: /(node_modules|bower_components)/,
         loader: 'babel-loader',
         query: {
           presets: ['react', 'es2015', 'stage-0'],
           plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'],
        }
      }
    ]
   },
   output: {
     path: __dirname + "/public/js/",
     filename: "bundle.js"
   },
   plugins: debug ? [] : [
     new webpack.optimize.DedupePlugin(),
     new webpack.optimize.OccurenceOrderPlugin(),
     new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false  }),
  ],
};

我正在关注这个Tutorial

【问题讨论】：

标签： reactjs redux decorator react-redux

【解决方案1】：

这表明装饰器转换设置不正确。我确实看到你有 transform-decorators-legacy 在那里，但我猜一些关于排序的东西是不正确的。

Redux 团队通常建议不要使用装饰器，因为它们仍然是一个不稳定的提议，而且规范和编译器插件都在发生变化。改用 connect 作为函数：export default connect(mapState, mapDispatch)(MyComponent)。

此外，启动和运行 React 应用程序构建环境的最简单方法是使用 Create-React-App 工具。它创建了一个工作项目环境，其中为您设置了构建工具，无需您自己管理配置，以及一系列出色的开发人员体验功能来帮助您入门。

【讨论】：