Question

我是redux的新手，我正在尝试用它构建我的应用程序。我创建了reducers文件，combine 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  }),
  ],
};

我跟着这个Tutorial

Answer 1

这表明装饰器变换未正确设置。我确实看到你有transform-decorators-legacy，但我猜想有关排序不正确。

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

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

Redux，提供者和装饰者

1 个答案: