Redux, Provider and decorators

Question

我是新的redux，我正试图用它来构建我的应用程序。我创建了reducers文件，组合reducers文件，组件，动作等但是当我启动服务器时，我得到意外令牌，其中@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  }),
  ],
};

我遵循本教程

Answer 1

这表明装饰器转换没有正确设置。我确实看到你有transform-decorators-legacy，但我猜顺序不对。

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

此外，创建和运行React应用程序构建环境的最简单方法是使用Create-React-App工具。它创建了一个工作的项目环境，为您设置了构建工具，没有您必须自己管理的配置，以及一堆很好的开发人员体验功能来帮助您开始。